Introduction

Chakra UI v3 has been released.
When using Chakra UI, I set up original color tokens every time, but the way you configure them changed drastically from v2 to v3, so I’ve put together how to do it.

Configuration code

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

This makes it easy to set up things like brand colors! ⚡️