ChakraUI V3 themeの色トークンを追加する
手法ががらりと変わっていたので、
code:theme.ts
import {
ChakraProvider as Provider,
createSystem,
defaultConfig,
defineConfig,
} from "@chakra-ui/react";
const colors = {
brand: {
900: "#00458e", // original color
800: "#0e61ad",
700: "#1672bf",
600: "#2083d1",
500: "#2791de",
400: "#46a0e2",
300: "#65b0e6",
200: "#8fc7ee",
100: "#badcf4",
50: "#e3f1fa",
},
gray: {
800: "#414042",
},
};
const config = defineConfig({
theme: {
semanticTokens: {
colors: {
brand: {
900: { value: colors.brand900 }, 800: { value: colors.brand800 }, 700: { value: colors.brand700 }, 600: { value: colors.brand600 }, 500: { value: colors.brand500 }, 400: { value: colors.brand400 }, 300: { value: colors.brand300 }, 200: { value: colors.brand200 }, 100: { value: colors.brand100 }, 50: { value: colors.brand50 }, },
},
},
},
});
const system = createSystem(defaultConfig, config);
export const ChakraProvider = (props: { children: React.ReactNode }) => {
return <Provider value={system} {...props} />;
};