颜色

了解如何在 Chakra UI 中自定义颜色

info

请先阅读 overview 组件，了解如何正确自定义样式引擎并确保类型安全。

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

令牌

¥Tokens

要创建新颜色，我们建议提供 50。 - 950 颜色值。以下是如何在 Chakra UI 中自定义颜色的示例。

¥To create new colors, we recommend providing 50 - 950 color values. 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: {
          50: { value: "#e6f2ff" },
          100: { value: "#e6f2ff" },
          200: { value: "#bfdeff" },
          300: { value: "#99caff" },
          // ...
          950: { value: "#001a33" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

要使用 brand 颜色，你可以将任何颜色相关属性（例如 bg、borderColor、color 等）的值设置为 brand 令牌。

¥To use the brand color, you can set the value of any color related properties, like bg, borderColor, color, etc. to the brand token.

<Box bg="brand.100" />

语义令牌

¥Semantic Tokens

调色板

¥Color Palette

对于主题中定义的新颜色，我们建议创建这些匹配的语义标记以确保一致性。

¥For new colors defined in the theme, we recommend creating these matching semantic tokens to ensure consistency.

solid：颜色的粗体填充颜色。
contrast：纯色文本颜色。
fg：用于文本、图标等的前景色。
muted：颜色的柔和颜色。
subtle：颜色的微妙色彩。
emphasized：强调版本的微妙颜色。
focusRing：交互元素获得焦点时的焦点环颜色。

note

如果你打算在 colorPalette 属性中使用颜色，则此功能是必需的。

¥This is required if you intend to use the color in colorPalette property.

theme.ts

const customConfig = defineConfig({
  theme: {
    tokens: {
      colors: {
        brand: {
          // ...
        },
      },
    },
    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}" },
        },
      },
    },
  },
})

要在组件中使用调色板，可以使用 colorPalette 属性。

¥To use the color palette in components, you can use the colorPalette property.

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

或者，你也可以直接使用语义 token。

¥Alternative, you can also use the semantic token directly.

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

自定义标记

¥Custom Tokens

以下是如何创建自定义语义标记的示例。

¥Here's an example of how to create custom semantic tokens.

theme.ts

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

const customConfig = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        "checkbox-border": {
          value: { _light: "gray.200", _dark: "gray.800" },
        },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

然后，你可以将 checkbox-border 令牌应用于任何组件。

¥Then, you can apply the checkbox-border token to any component.

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

断点

条件