CSS颜色变量需通过语义化命名（如--btn-primary-bg）、配合@media响应深色模式、结合对比度工具保障可访问性，其本质是设计系统接口契约而非单纯视觉控制。
CSS颜色变量本身不理解心理学，它只管渲染——真正起作用的是你如何组织、命名和切换这些变量，让设计意图能被开发者和设计师共同感知、稳定复用。
color-scheme 变量名该不该带语义
带语义的变量名（比如 --primary-action）比纯物理描述（比如 --blue-600）更利于维护，但前提是团队对“primary”有一致认知。一旦产品改版，“primary”可能从蓝色变成青绿色，而 --blue-600 这个名字反而成了干扰项。
- 推荐做法：用功能+层级组合命名，如
--btn-primary-bg、--text-secondary - 避免命名：直接绑定色值或品牌色名，如
--brand-blue、--dark-mode-purple - 注意：CSS 自定义属性不支持嵌套计算，
--btn-primary-bg不能动态基于--theme-accent衍生，得手动同步
深色模式下 color-scheme 不生效的常见原因
color-scheme 是一个 CSS 属性，不是媒体查询开关；它告诉浏览器“这个元素支持哪种配色方案”，但不自动切换颜色。很多人以为设了 color-scheme: dark 就能变暗，其实只是启用了系统级优化（比如表单控件自动适配）。
- 真正切换颜色得靠
@media (prefers-color-scheme: dark)+ 变量重定义 - 别漏掉 root 层级重置：
:root { --text-default: #1a1a1a; } @media (prefers-color-scheme: dark) { :root { --text-default: #e0e0e0; } } - 第三方组件库常忽略
color-scheme声明，导致其内部控件在深色模式下仍用亮色边框或阴影
色彩对比度不足时，CSS 变量怎么帮上忙
WCAG 要求文本与背景对比度至少 4.5:1，但设计师给的 --accent-color 和 --surface-bg 组合可能不达标。纯靠人眼判断或手动调色不可靠，变量可以封装基础算法逻辑（虽然 CSS 本身不支持 if/else）。
立即学习“前端免费学习笔记（深入）”；
- 务实做法：用工具生成安全配对，如把
--accent-color固定为可访问的深色/浅色版本：--accent-color-light、--accent-color-dark - 不要尝试用
hsl()动态调整亮度——不同色相对亮度变化敏感度差异极大，蓝紫色调暗后极易低于对比度阈值 - 检查时机很重要：变量值确定后，必须用浏览器 DevTools 的“Contrast ratio”面板实测，而不是依赖设计稿标注
最易被忽略的一点：色彩变量一旦进入组件库或跨项目复用，就不再是视觉问题，而是接口契约。改一个 --error-text 的值，可能让五个业务线的表单验证提示同时失效——这时候命名清晰度和变更流程，比心理学原理重要得多。
