chakra-uiでthemeからカラーコードを取得する

chakra uiのテーマ機能を使用しgray.300のような値を特定のカラーコードに変換できるようになっているが、chakra uiのコンポーネントでは無いものに値を渡すに当たってカラーコードハードコードするのも…と考えていた所、ちゃんとカラー文字列をカラーコードに変換する方法が用意されていた

（ドキュメント見てても全然見つけられなかった…）

stackoverflow.com

chakra uiが用意しているuseTokenを利用する

function Example() {
  const [gray300] = useToken(
    'colors',
    ['gray.300']
  )

  return (
    <h1 style={{color: gray300}}>hoge</h1>
  )
}

これでテーマのgray.300を取り出す事ができる

全然関係無いけどtailwindとかだとどうやって取り出すのかちょっと気になった

参考

• useToken - Chakra UI