Theme Customization

Chakra UI includes a default design system that defines colors, fonts, spacing, and other design tokens. These tokens control the visual appearance of components across the application.

Theme customization in Chakra UI is done by extending the default system configuration and providing custom tokens. Create a theme configuration file to define brand-specific values.

// src/theme.js
import { createSystem, defaultConfig } from "@chakra-ui/react"

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      colors: {
        brand: {
          500: { value: "#2f6bff" },
        },
      },
      fonts: {
        heading: { value: "system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif" },
        body: { value: "system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif" },
      },
    },
  },
})

Update the provider to use the customized system:

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

export function Provider({ children }) {
  return (
    <ChakraProvider value={system}>
      <ThemeProvider attribute="class">
        {children}
      </ThemeProvider>
    </ChakraProvider>
  )
}

Once applied, all Chakra UI components automatically use the customized colors and fonts.