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>