虚拟颜色

概述

Chakra 允许您在项目中创建虚拟颜色或颜色占位符。colorPalette 属性是您创建虚拟颜色的方式。

<Box
  colorPalette="blue"
  bg={{ base: "colorPalette.100", _hover: "colorPalette.200" }}
>
  Hello World
</Box>

这将转换为 blue.100 背景色和悬停时的 blue.200 背景色。

用法

虚拟颜色的基本要求是您的颜色必须具有一致的命名约定。默认情况下，Chakra 为我们提供的每种颜色使用 50-950 颜色值。

这使得您可以更轻松地创建和使用虚拟颜色。假设我们需要从头开始创建一个可主题化的轮廓按钮。

<chakra.button
  borderWidth="1px"
  colorPalette="red"
  borderColor="colorPalette.500"
  _hover={{
    borderColor: "colorPalette.600",
  }}
>
  Click me
</chakra.button>

方案

虚拟颜色与方案一起使用时最有用。

const buttonRecipe = defineRecipe({
  base: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    // set the color palette
    colorPalette: "blue",
  },
  variants: {
    variant: {
      primary: {
        bg: "colorPalette.500",
        color: "white",
      },
      outline: {
        borderWidth: "1px",
        borderColor: "colorPalette.500",
        _hover: {
          borderColor: "colorPalette.600",
        },
      },
    },
  },
})

组件

Chakra 中的大多数内置组件都支持虚拟颜色。

<Button colorPalette="blue">Click me</Button>
<Button colorPalette="red" variant="outline">
  Click me
</Button>

暗色模式

使用虚拟颜色可以做的另一件很棒的事情是将其与暗色模式一起使用。

<Box
  colorPalette="blue"
  bg={{ base: "colorPalette.600", _dark: "colorPalette.400" }}
>
  Hello World
</Box>

此元素在亮色模式下将具有 blue.600 背景色，在暗色模式下将具有 blue.400 背景色。