Chapter 06無料公開

Theme: 色のTheme・キーワード

terrierscript
terrierscript
2021.05.08に更新
このチャプターの目次

一般的なUIライブラリ同様、Chakra UIもTheme機能を保持しています。
ここではデフォルトのThemeについて解説していきます

色に関するTheme

色はrgb(0,0,0)#ffffffのような通常の値も使えますが、その他にred.500のように、色と数値を組み合わせるのが基本になります。

<Box
  background={"blue.100"} borderColor={"teal.300"} color={"green.800"}
  borderBottomWidth={4}
  p={2}
>
  background={"blue.100"} borderColor={"teal.300"} color={"green.800"}
</Box>

色はgray / red / orange / yellow / green / teal / blue / cyan / purple / pink、数値は50100から900の100刻みの10段階が存在しています。50が最も薄く、900が最も濃い色として設定されています。[1]

どんな色があるかは下記公式ページで確認するのが良いでしょう

colorScheme

一部の色を利用するコンポーネントについては、colorSchemeが設定できます。
これはredgreenなど数値は無く色だけを指定します。
<Button>は代表的ですが、<Tab>など比較的複雑なコンポーネントもこれが利用できます

<Button colorScheme="green">Green button</Button>

<Tabs colorScheme="red">
  <TabList> ...

tab sample