Chakra UI v3 theme.tsでカスタムして色を変える

はじめに

ドキュメントを見ながら実装を試みましたが、なかなかうまくいかなかったです。
ドキュメント以外の情報を探しましたが、v3の情報はあまりなかったです。

問題

ドキュメントを見たのですが、Chakra UI v3で色をつけることができませんでした。

Customization
https://www.chakra-ui.com/docs/theming/customization/overview
Colors
https://www.chakra-ui.com/docs/theming/customization/colors

解決方法

ChakraProvider、customConfig、使い方が、ドキュメントだと記述が省かれていたりするので、漏れなく記述します。

また、カスタムテーマの設定では、#edf2f7のような具体的な色コードを指定する必要があり、gray.100のような色名で指定することはできないようです。
地味にはまりました。
https://www.chakra-ui.com/docs/theming/colors

修正後の画面

src/theme.ts

// カラーを定義
import { createSystem, defaultBaseConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
    theme: {
        tokens: {
            colors: {
                700: { value: "#ffcccc" },
                brand: {
                    50: { value: "#e6f2ff" },
                },
            },
        },
    },
})

export const system = createSystem(defaultBaseConfig, customConfig)

src/main.tsx

// プロバイダーを設定
import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { Provider } from "@/components/ui/provider"
import { ChakraProvider } from "@chakra-ui/react"

// cssを定義したsystemをimport
import { system } from "@/theme"
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Provider>
    {/* cssを定義したsystemをvalueにして、ChakraProviderを設定 */}
        <ChakraProvider value={system}>
                <App />
        </ChakraProvider>
    </Provider>
  </React.StrictMode>,
)

src/App.tsx

// スタイルを使用
import { Box } from "@chakra-ui/react"

export default function App() {
    return (
        <>
            <Box>Hello World</Box>
            {/* ChakraProviderを使う */}
            {/* <Box bg="brand.50" > */}
            <Box bg="700" >
                Hello World2
            </Box>
            <Box bg="brand.50" >
                Hello World3
            </Box>
        </>
    )
}

src/components/ui/provider.tsx

import { ChakraProvider } from "@chakra-ui/react"
import { ThemeProvider } from "next-themes"
import { system } from "../../theme"

export function Provider(props: { children: React.ReactNode }) {
    return (
        <ChakraProvider value={system}>
            <ThemeProvider attribute="class" disableTransitionOnChange>
                {props.children}
            </ThemeProvider>
        </ChakraProvider>
    )
}

おわりに

ドキュメントでも、必要な文が省略されていることもあるので、不足している部分は補う必要があることを学びました。

参考

Customization
https://www.chakra-ui.com/docs/theming/customization/overview
Colors
https://www.chakra-ui.com/docs/theming/customization/colors