You can customize the dark mode colors in Chakra UI by modifying the _dark values of the semantic color tokens. This guide will show you how to override the default dark mode colors.

Customizing dark mode colors

Use the createSystem method to override the dark mode colors in your theme configuration:

const config = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        bg: {
          DEFAULT: {
            value: { _light: "{colors.white}", _dark: "#141414" }, // Custom dark background
          },
          subtle: {
            value: { _light: "{colors.gray.50}", _dark: "#1a1a1a" }, // Custom dark subtle background
          },
          muted: {
            value: { _light: "{colors.gray.100}", _dark: "#262626" }, // Custom dark muted background
          },
        },
        fg: {
          DEFAULT: {
            value: { _light: "{colors.black}", _dark: "#e5e5e5" }, // Custom dark text color
          },
          muted: {
            value: { _light: "{colors.gray.600}", _dark: "#a3a3a3" }, // Custom dark muted text
          },
        },
        border: {
          DEFAULT: {
            value: { _light: "{colors.gray.200}", _dark: "#404040" }, // Custom dark border
          },
        },
      },
    },
  },
})

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

Understanding semantic color tokens

The semantic color tokens in Chakra UI follow this pattern:

{
  [colorKey]: {
    [variant]: {
      value: {
        _light: string, // Light mode value
        _dark: string   // Dark mode value
      }
    }
  }
}

Common color keys include:

• bg - Background colors
• fg - Foreground/text colors
• border - Border colors

Each color key has variants like:

• DEFAULT - Base color
• subtle - Subtle variation
• muted - Muted variation
• emphasized - Emphasized variation

Customizing specific color palettes

You can also customize specific color palettes for dark mode:

const config = defineConfig({
  theme: {
    semanticTokens: {
      colors: {
        blue: {
          solid: {
            value: { _light: "{colors.blue.600}", _dark: "#0284c7" }, // Custom dark blue
          },
          muted: {
            value: { _light: "{colors.blue.100}", _dark: "#082f49" }, // Custom dark muted blue
          },
        },
        // Add more color palettes as needed
      },
    },
  },
})

Best practices

1. Color contrast: Ensure your custom dark mode colors maintain sufficient contrast for accessibility.

2. Consistent palette: Keep your dark mode colors consistent across your application by using a cohesive color palette.

3. Testing: Always test your custom colors in both light and dark modes to ensure good readability and visual harmony.