Customization
Learn how to customize the Chakra UI theme
Overview
Chakra UI uses a system of configs to define the default styling system.
defaultBaseConfig
: contains the conditions and style properties.defaultConfig
: everything fromdefaultBaseConfig
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 configmergeConfigs
: used to merge multiple system configscreateSystem
: used to create a styling engine from the config
theme.ts
import { createSystem, defaultBaseConfig, defineConfig } from "@chakra-ui/react"
const customConfig = defineConfig({
theme: {
colors: {
brand: {
500: "tomato",
},
},
},
})
export const system = createSystem(defaultBaseConfig, customConfig)
Next, update the ChakraProvider
to use the custom system.
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>
)
}
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