Change the default color palette

By default, Chakra UI uses the gray color palette for various UI elements like selection backgrounds and hover states. You can customize this default behavior by modifying the global CSS configuration.

What "default color" means

In Chakra, "default color" usually means:

• Global palette used by colorPalette.* tokens
• Component-level palette set with colorPalette prop

Set a global default first, then override per component when needed.

Customizing the default color palette

Use the createSystem method to override the default color palette in your theme configuration:

const config = defineConfig({
  globalCss: {
    html: {
      colorPalette: "blue", // Change this to any color palette you prefer
    },
  },
})

export const system = createSystem(defaultConfig, config)

Next, add the new system to your components/ui/provider.tsx file:

"use client"

import { system } from "@/components/theme"
import { ChakraProvider } from "@chakra-ui/react"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}

What this affects

Changing the default color palette will affect various UI elements across your application, including:

• Text selection background colors
• Default hover states
• Focus states
• Other interactive elements that use the default color palette

You can still override a specific component:

<Button colorPalette="red">Delete</Button>

Using custom color palettes

You can use any of the built-in color palettes or your own custom color palette:

// Built-in color palettes
colorPalette: "blue"
colorPalette: "green"
colorPalette: "red"

// Custom color palette (if defined in your theme)
colorPalette: "brand"

:::warning

When using a custom color palette, make sure you've defined all the necessary color tokens (50-900) and semantic tokens in your theme configuration.

:::

For more information about creating custom color palettes, see the guide on creating custom colors.