Colors

Learn how to customize colors in Chakra UI

info

Please read the overview first to learn how to properly customize the styling engine, and get type safety.

Tokens

Example

Here's an example of how to customize colors in Chakra UI.

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          100: { value: "#e6f2ff" },
          200: { value: "#bfdeff" },
          300: { value: "#99caff" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

Usage

Set the value of any color related properties, like bg, borderColor, color, etc. to the brand token.

<Box bg="brand.100" />

Semantic Tokens

Example

Here's an example of how to customize semantic tokens in Chakra UI.

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        "checkbox-control": {
          value: { _light: "brand.100", _dark: "brand.200" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

Usage

Use the checkbox-control token to apply the checkbox control color.

<Square size="4" borderColor="checkbox-control">
  <LuCheck />
</Square>