⚡

ChakraUI V3 themeの色トークンを追加する

に公開
TypeScript
Chakra UI
Chakra UI v3
tech

はじめに

ChakraUI V3が公開されましたね。
ChakraUIを使うとき、オリジナルカラーのトークンを毎度設定するのですが、v2からv3で設定方法がガラリと変わっていたので、設定方法をまとめます。

設定コード

theme.tsを書き換えます。

theme.ts
 import {
   ChakraProvider as Provider,
   createSystem,
   defaultConfig,
   defineConfig,
 } from "@chakra-ui/react";
 
 const config = defineConfig({
   theme: {
     semanticTokens: {
       colors: {
         brand: {
           900: { value: "#00458e" },
           800: { value: "#0e61ad" },
           700: { value: "#1672bf" },
           600: { value: "#2083d1" },
           500: { value: "#2791de" },
           400: { value: "#46a0e2" },
           300: { value: "#65b0e6" },
           200: { value: "#8fc7ee" },
           100: { value: "#badcf4" },
           50: { value: "#e3f1fa" },
         },
       },
     },
   },
 });
 
 const system = createSystem(defaultConfig, config);
 
 export const ChakraProvider = (props: { children: React.ReactNode }) => {
   return <Provider value={system} {...props} />;
 };

これによってブランドカラーなど容易に設定できるようになります！⚡️

Discussion