css统一颜色管理靠的是:root变量+语义化命名+工程纪律，而非语法能力；必须在:root声明默认值，用@media或[data-theme]覆盖差异项，var()需带字面量fallback，禁用!important和嵌套fallback。
CSS 本身没有 Color Token 系统，所谓“统一颜色管理”靠的是人为约定 + :root 变量 + 严格命名规范，不是语法能力，而是工程纪律。
为什么var(--color-primary)比#007bff更利于协作
硬编码颜色值在多人并行开发中极易失控：设计师改了 Figma 里的品牌蓝，前端漏改某处 .card-header 的边框色，测试阶段才被发现。而 var(--color-primary) 把修改收敛到一处——只要 :root 里那行变了，所有引用自动更新。
- 变量必须定义在
:root，不能塞进.button或.header里，否则子组件读不到 - 命名必须语义化：
--color-primary合规，--blue-500违规（设计换为紫色主题时全得重命名） - 禁止嵌套 fallback：
var(--color-primary, var(--color-brand))在 JS 读取时可能返回空字符串，浏览器不递归解析 - 每个
var()都该带字面量 fallback：color: var(--color-text, #333)，别用red这类模糊值
怎么写:root才不会被覆盖或失效
常见错误是只在 [data-theme="dark"] 里定义深色变量，却忘了 :root 默认值——页面加载瞬间会闪白或文字消失。正确顺序是：
根据ui图生成前端页面
下载
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
- 先在
:root声明所有基础色的默认值（亮色模式） - 再用
@media (prefers-color-scheme: dark)或:root[data-theme="dark"]覆盖差异项，不是重写整套 - 避免用
!important覆盖变量，它会切断 JS 动态修改能力 - 检查 DevTools 的 Computed 面板：如果看到
color: var(--color-text)而不是计算后的#333，说明变量未被解析（作用域错、拼写错、或没 fallback）
rgb(255 0 0 / 0.5)这类新语法对协作有什么实际影响
空格分隔 + 斜杠 Alpha 的写法（rgb(255 0 0 / 0.5)）比旧式 rgba(255, 0, 0, 0.5) 更易维护：它把颜色和透明度耦合在同一个函数里，避免 color 和 opacity 分开调导致层级异常。但要注意：
- 团队需统一采用新语法，不能一部分人写
rgba()，一部分人写rgb() / alpha，CI 流水线可用 Stylelint 插件plugin/stylelint-color-function-unit拦截 - 透明度必须用斜杠语法，
rgb(255, 0, 0) / 0.5是无效的，浏览器直接忽略整条声明 - 衍生色推荐用
color-mix(in srgb, --color-primary, white 30%)而非手动算 HEX，减少人为误差
跨平台颜色同步最容易被忽略的细节
Figma、CSS、Qt、甚至 Markdown 文档里的颜色要真正一致，关键不在格式转换，而在空间理解：
- Qt 不支持 CSS 的 3 位简写
#abc，必须转成#aabbcc；8 位带 Alpha 的#rrggbbaa才能被QColor正确识别 - Figma 的 “Brand/Primary” 样式名必须与 CSS 的
--color-brand-primary完全一致，大小写、连字符、层级都不能差 - 设计师给的 “浅蓝” 如果没提供具体 HEX 或 RGB，前端不能自行估算——应退回要求明确值，否则各端渲染偏差会累积
- OKLCH 等感知均匀色彩模型（如 HeroUI Theme Builder 所用）虽更准，但当前 CSS 支持有限，生产环境仍以 sRGB 为基准，别过早引入复杂转换逻辑
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
