颜色

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

信息

请阅读概述以了解如何正确自定义样式引擎并获得类型安全。

令牌

要创建新颜色，我们建议提供50 - 950 的颜色值。以下是如何在 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 令牌。

<Box bg="brand.100" />

语义令牌

调色板

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

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

注意

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

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 属性。

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

或者，您也可以直接使用语义令牌。

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

自定义令牌

以下是创建自定义语义令牌的示例。

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 令牌应用于任何组件。

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

断点

条件