はじめに

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

設定コード

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} />;
};

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