主题定制预览

Clarify 支持通过配置文件选择主题预设,并在预设基础上覆盖主题 token。本页只展示当前稳定的主题配置能力。


主题预设

export default defineConfig({
  theme: {
    preset: 'default',
  },
})

default 采用 Clarify 自己的主题色系统,主色参考 SVG Logo 中的 #00D492,并搭配 #00F6C9 作为辅助色。base 则没有颜色偏好,使用黑、白、灰构成标准主题。


覆盖品牌主色

export default defineConfig({
  theme: {
    preset: 'base',
    tokens: {
      colors: {
        primary: '#00D492',
      },
    },
  },
})

tokens.colors.primary 会在预设基础上覆盖主色。


其他主题色参考

颜色名称色值适合场景
翡翠绿#10b981自然、清新
紫罗兰#8b5cf6现代、科技
玫瑰红#f43f5e活力、醒目
琥珀橙#f59e0b温暖、友好
青柠绿#84cc16年轻、活力

主题边界

当前版本不提供稳定的项目级自定义 CSS 入口,也不支持通过用户项目的 tailwind.config.js 覆盖 Clarify 渲染器样式。

如需更深层的品牌定制,应等待后续明确的主题或组件扩展 API。