CSS Variables

Learn how to customize CSS variables in Chakra UI

info

Please read the overview first to learn how to properly customize the styling engine, and get type safety.

Variable Root

Here's an example of how to customize the selector that token CSS variables are applied to.

theme.ts

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

const customConfig = defineConfig({
  cssVarsRoot: ":where(html)",
})

export const system = createSystem(defaultConfig, customConfig)

The emitted CSS variables will now be applied to the html element.

:where(html) {
  --chakra-colors-gray-100: #e6f2ff;
  --chakra-colors-gray-200: #bfdeff;
  --chakra-colors-gray-300: #99caff;
}

Variable Prefix

Here's an example of how to customize the prefix of the emitted CSS variables.

theme.ts

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

const customConfig = defineConfig({
  cssVarsPrefix: "sui",
})

export const system = createSystem(defaultConfig, customConfig)

The emitted CSS variables will now use the sui prefix.

:where(html) {
  --sui-colors-gray-100: #e6f2ff;
  --sui-colors-gray-200: #bfdeff;
  --sui-colors-gray-300: #99caff;
}

Conditions

Global CSS