Customization

Overview

Chakra UI uses a system of configs to define the default styling system.

• defaultBaseConfig: contains the conditions and style properties.
• defaultConfig: everything from defaultBaseConfig plus the built-in tokens and recipes.

The defaultSystem exported from Chakra UI uses the defaultConfig by default.

When customizing the theme, it's important to decide if you want to merge your config with defaultConfig or start from scratch with defaultBaseConfig.

Customization

These are the key functions needed to customize the Chakra UI theme.

• defineConfig: used to define the system config
• mergeConfigs: used to merge multiple system configs
• createSystem: used to create a styling engine from the config

import {
  createSystem,
  defaultBaseConfig,
  defineConfig,
  mergeConfigs,
} from "@chakra-ui/react"

const customConfig = defineConfig({
  theme: {
    colors: {
      brand: {
        500: "tomato",
      },
    },
  },
})

const config = mergeConfigs(defaultBaseConfig, customConfig)

export const system = createSystem(config)

Next, update the ChakraProvider to use the custom system.

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>
  )
}

Complete Customization

In most cases, we recommend starting with the default configuration and only specify the things you want to customize.

However, if you prefer to start from scratch, scaffold the default tokens and recipes using the CLI.

npx @chakra-ui/cli@next eject --outdir ./theme

This will generate a file that includes all the tokens and recipes in Chakra.

TypeScript

After customizing the default config, you may need to update the types.

npx @chakra-ui/cli@next typegen ./theme.ts