Park UI 中自定义主题颜色的实现方法

在 Park UI 项目中，开发者经常需要自定义主题颜色来满足不同的设计需求。本文重点介绍如何通过修改 Panda CSS 配置来实现自定义 accentColor（强调色）的设置。

理解 Park UI 的颜色系统

Park UI 采用了语义化的颜色命名方式，其中 accentColor 是用于表示强调、高亮或主要操作的颜色。系统默认提供了一套预设的 accentColor 调色板，但在实际项目中，开发者往往需要将其替换为品牌色或自定义颜色。

自定义 accentColor 的实现

在 Panda CSS 配置文件中，可以通过覆盖 semanticTokens 来重新定义 accentColor 调色板。具体实现如下：

// panda.config.ts
export default defineConfig({
  // ...其他配置
  semanticTokens: {
    colors: {
      accent: {
        1: { value: { base: '#fff8f7', _dark: '#1c1412' } },
        2: { value: { base: '#ffefef', _dark: '#391a18' } },
        3: { value: { base: '#ffe0e0', _dark: '#5b201d' } },
        4: { value: { base: '#ffcece', _dark: '#7e2520' } },
        5: { value: { base: '#ffb8b8', _dark: '#a42923' } },
        6: { value: { base: '#ff9d9d', _dark: '#cb2e26' } },
        7: { value: { base: '#ff7575', _dark: '#f33329' } },
        8: { value: { base: '#ff5252', _dark: '#ff5e54' } },
        9: { value: { base: '#ff0000', _dark: '#ff0000' } },
        10: { value: { base: '#e60000', _dark: '#e60000' } },
        default: { value: '{colors.accent.9}' },
        emphasized: { value: '{colors.accent.10}' },
        fg: { value: 'white' },
      },
    },
  },
})

关键配置解析

1. 多级色阶定义：从 1 到 10 定义了不同深浅程度的颜色值，1 为最浅，10 为最深。

2. 明暗模式支持：每个色阶都支持 base(亮色模式)和_dark(暗色模式)两种值。

3. 语义化别名：

   • default: 默认使用的 accent 颜色
   • emphasized: 强调状态下的颜色
   • fg: 在 accent 背景上使用的文字颜色

最佳实践建议

1. 保持对比度：确保 accentColor 与背景色有足够的对比度，特别是对于可交互元素。

2. 一致性：在整个项目中保持 accentColor 的使用一致，避免随意使用不同色调。

3. 测试验证：修改后应在不同设备和环境下测试颜色显示效果。

4. 文档记录：在团队文档中记录自定义的颜色值，方便后续维护。

通过这种方式，开发者可以轻松地将 Park UI 的主题颜色与品牌视觉规范保持一致，而无需逐个组件修改样式。