In Chakra UI advanced theming how to remove all preset colors in the colors object?

Question

Building a design system in Chakra I'm trying to figure out how I can remove all the preset colors to what I specify but for some reason when I log the theme I can see everything still exists in the color object:

Code

theme/index.tsx

import { extendTheme } from '@chakra-ui/react'
import { withProse } from '@nikolovlazar/chakra-ui-prose'

import { colors } from './colors'
import { components } from './components'
import { config } from './config'
import { fonts } from './fonts'

const customTheme = extendTheme({
  fonts,
  colors,
  config,
  components,
})

export default extendTheme(customTheme, withProse())

theme/colors.tsx:

import type { DeepPartial, Theme } from '@chakra-ui/react'

// import { designSystemColors } from '@/designSystem'

const extendedColors: DeepPartial<
  Record<string, Theme['colors']['blackAlpha']>
> = {
  brand: {
    100: '',
    200: '',
    300: '',
    400: '',
    500: '',
    600: '',
    700: '',
    800: '',
    900: '',
  },
}

const overrideChakraColors: DeepPartial<Theme['colors']> = {}

export const colors = {
  ...overrideChakraColors,
  transparent: 'transparent',
  black: '#000000',
  white: '#ffffff',
  // ...designSystemColors,
  ...extendedColors,
}

theme/config.tsx:

import type { ThemeConfig } from '@chakra-ui/react'

export const config: ThemeConfig = {
  initialColorMode: 'system',
  useSystemColorMode: false,
  disableTransitionOnChange: false,
}

Research

• [extendTheme] Help with globally extending colors in the default theme
• Advanced Theming
• Color Mode
• Default Theme

In Chakra UI theming how can I remove all the preset colors of the theme?

Answer 1

Merging a custom theme with the default theme is the intended behavior of extendTheme¹.

To override the theme in order to remove colors, create a theme object, rather than using extendTheme, and pass it to the ChakraProvider theme prop. If it's not merged with the Chakra UI theme, the Chakra UI styles will be lost.

To prevent this, the Chakra theme and custom theme can be merged manually while omitting the properties from the Chakra theme you want removed.

For colors, I suggest keeping black, blackAlpha, currentColor, gray, transparent, white, and whiteAlpha as the Chakra UI base styles regularly use those. If those tokens are removed, many of the base component styles will need to be customized to account for their loss.

When modifying other theme elements and wanting to keep the Chakra UI base styles, ensure the Chakra UI base styles are copied into the modified element.

The example below uses the spread operator, but use whichever object merging method you prefer.

import {theme, type Colors} from "@chakra-ui/react";

const customColors: Colors = {
    brand: {
        50: "#f5faff",
        100: "#eaf2ff",
        200: "#c8dfff",
        300: "#a6ccff",
        400: "#63a3ff",
        500: "#208aff",
        600: "#1d74e6",
        700: "#174fb4",
        800: "#123a89",
        900: "#0d275e",
    }
}
export const mergedTheme: Record<keyof typeof theme, unknown> = {
    ...theme,
    colors: {
        // Chakra UI base colors used heavily in theme styles
        black: "#000000",
        blackAlpha: {...theme.colors.blackAlpha},
        currentColor: "currentColor",
        gray: {...theme.colors.gray},
        transparent: "transparent",
        white: "#ffffff",
        whiteAlpha: {...theme.colors.whiteAlpha},

        // Add custom colors
        ...customColors,
    },
    borders: {
        // Keep Chakra UI base borders
        ...theme.borders,

        // Add custom borders
        "3px": "3px solid",
    }
}

The above removes the Chakra UI colors except those specified. Hope this helps!

---

Reference
1 chakra-ui GitHub: Source code for extendTheme