Creating custom colors

November 15, 2024

To create custom colors in Chakra UI, you want to define two things:

tokens: For the 50-950 color palette
semanticTokens: For the solid, contrast, fg, muted, subtle, emphasized, and focusRing color keys

To learn more about tokens and semantic tokens, refer to the theming guide.

components/theme.ts

const config = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          50: { value: "#e6f2ff" },
          100: { value: "#e6f2ff" },
          200: { value: "#bfdeff" },
          300: { value: "#99caff" },
          // ...
          950: { value: "#001a33" },
        },
      },
    },
    semanticTokens: {
      colors: {
        brand: {
          solid: { value: "{colors.brand.500}" },
          contrast: { value: "{colors.brand.100}" },
          fg: { value: "{colors.brand.700}" },
          muted: { value: "{colors.brand.100}" },
          subtle: { value: "{colors.brand.200}" },
          emphasized: { value: "{colors.brand.300}" },
          focusRing: { value: "{colors.brand.500}" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, config)

Next, you add the new system to your components/ui/provider.tsx files

"use client"

import { system } from "@/components/theme"
import {
  ColorModeProvider,
  type ColorModeProviderProps,
} from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

Next, you run the CLI typegen command to generate the types.

npx chakra typegen ./theme.ts

Using the color

With that in place, you can use the color in components as well as colorPalette utilities.

<Button colorPalette="brand">Click me</Button>

You can also use the semantic token directly.

<Box color="brand.contrast" bg="brand.solid">
  Hello world
</Box>

Alternatively, you can use the raw token value.

<Box color="brand.500">Hello world</Box>