カラースキーム

概要

カラースキームは、値を基にしてコンポーネントにカラーコンテキストを生成します。これは、色の一貫性を向上させます。

カラースキームに値を設定すると、下記のプロパティが生成されます。これらの値は、テーマのセマンティックトークンで設定されています。

• colorScheme.solid: 背景などで使用する塗りつぶし色。
• colorScheme.bg: 背景などで使用するかすかな色。
• colorScheme.ghost: 背景などで使用するわずかな色。
• colorScheme.fg: 文字などで使用する色。
• colorScheme.outline: 境界線などで使用する色。
• colorScheme.contrast: colorScheme.solidで使用するテキスト色。
• colorScheme.subtle: colorScheme.bgよりもコントラストが高い色。
• colorScheme.muted: colorScheme.subtleよりもコントラストが高い色。
• colorScheme.emphasized: colorScheme.mutedよりもコントラストが高い色。

また、colorScheme.50からcolorScheme.950までのトーン色も生成されます。

使い方

<VStack gap="md">
  <Box
    p="md"
    colorScheme="blue"
    bg="colorScheme.solid"
    color="colorScheme.contrast"
  >
    Solid
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Subtle
  </Box>
</VStack>

カラースキームは、親要素のカラースキームを継承します。

<VStack gap="md" colorScheme="blue">
  <Box p="md" bg="colorScheme.solid" color="colorScheme.contrast">
    Provided by Parent
  </Box>
  <Box
    p="md"
    colorScheme="green"
    bg="colorScheme.subtle"
    color="colorScheme.fg"
  >
    Child
  </Box>
</VStack>