Park-UI项目中如何动态获取主题颜色值

在Park-UI这类设计系统项目中，开发者经常需要动态获取主题定义的颜色值来实现UI一致性。本文介绍几种在代码中获取主题颜色的技术方案。

主题颜色获取方案

1. 通过Token系统直接获取

Park-UI内置了完善的Design Token系统，可以通过token()函数直接访问颜色值：

const accentColor = token("colors.accent.10")

这种方式直接对接设计系统的Token体系，能够确保获取的颜色值与主题定义完全一致，是最推荐的做法。

2. CSS变量方案

如果项目采用CSS变量定义主题色，也可以通过JavaScript获取：

const accentColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--colors-accent-10')

3. 主题对象访问

某些设计系统会暴露主题对象，可以直接访问：

import { theme } from 'park-ui'

const accentColor = theme.colors.accent[10]

实际应用场景

在SVG图标着色场景中，动态获取主题色特别有用：

function ThemedIcon() {
  const fillColor = token("colors.accent.10")
  
  return (
    <svg fill={fillColor}>
      {/* SVG路径 */}
    </svg>
  )
}

最佳实践建议

1. 优先使用设计系统提供的Token API
2. 避免硬编码颜色值
3. 考虑颜色值的响应式变化
4. 对获取的颜色值进行类型检查

通过合理使用设计系统的颜色获取机制，可以确保UI在不同主题下保持视觉一致性，同时提高代码的可维护性。