默认情况下，Chakra UI 对各种 UI 元素（如选中背景和悬停状态）使用灰色颜色调色板。您可以通过修改全局 CSS 配置来定制此默认行为。

定制默认颜色调色板

使用 createSystem 方法在您的主题配置中覆盖默认颜色调色板

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

export const system = createSystem(defaultConfig, config)

接下来，将新的 system 添加到您的 components/ui/provider.tsx 文件中

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

这将影响什么

更改默认颜色调色板将影响应用程序中的各种 UI 元素，包括

• 文本选择背景颜色
• 默认悬停状态
• 焦点状态
• 使用默认颜色调色板的其他交互元素

使用自定义颜色调色板

您可以使用任何内置的颜色调色板或您自己的自定义颜色调色板

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

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