颜色变量应按语义功能分组命名，如--color-primary、--color-success；需区分明暗模式与可访问性层级并提供对应值；通过基础色板加CSS函数生成衍生色阶；采用命名空间前缀实现作用域隔离。
按语义功能分组颜色变量
颜色不应只按物理属性（如 red、blue）命名，而要体现用途。比如 --color-primary 代表主品牌色，用于按钮、重要链接；--color-success 表示操作成功状态，用于绿色提示；--color-border 专用于边框，和 --color-bg-surface（卡片/模态框背景）分离。这样修改主题时只需调整几处变量，组件样式自动响应，避免全局搜索替换。
区分明暗模式与可访问性层级
同一语义颜色需提供亮/暗两套值，并用 CSS 媒体查询或 class 控制切换：
- --color-text-primary: #1a1a1a;（深色模式默认）
- --color-text-primary-dark: #f0f0f0;（暗色模式下对应值）
- 通过
:root[data-theme="dark"]或@media (prefers-color-scheme: dark)覆盖变量
同时为满足 WCAG 对比度要求，可额外定义 --color-text-primary-high-contrast，供高对比度模式专用，不与普通文本混用。
基础色板 + 衍生色阶统一管理
先定义少量核心基础色（如品牌主色、中性灰），再用 CSS 函数生成衍生值，减少硬编码：
立即学习“前端免费学习笔记（深入）”；
- --color-brand-base: #4a6fa5;
- --color-brand-light: hsl(from var(--color-brand-base) h s calc(l + 15%));
- --color-brand-dark: hsl(from var(--color-brand-base) h s calc(l - 15%));
这样调整 --color-brand-base 时，整套 light/dark 变体自动更新，保持视觉一致性。
作用域隔离与命名空间前缀
大型项目中，用命名空间避免冲突，例如：
- --sys-color-primary（系统级基础色）
- --cmp-button-color-bg（按钮组件内局部色）
- --token-color-shadow（设计 token 层，供 Figma 同步使用）
配合 CSS 自定义属性继承机制，在组件容器上设置局部变量，实现主题微调，不影响全局体系。
