直接改--primary不能自动适配状态色，必须将硬编码色值全部替换为hsl(from var(--primary)...)等相对色彩表达式，并为旧浏览器提供逗号分隔的fallback，同时覆盖第三方库样式及SVG fill。
直接改 --primary 就能让所有 hover、active、disabled 状态自动适配，前提是把旧项目里散落的 #3b82f6、rgb(59, 130, 246) 这类硬编码颜色全部替换成相对色彩表达式——不是加个变量就完事，得重写逻辑。
把“写死的颜色”变成“可计算的通道”
老旧项目里常见 button:hover { background: #2563eb; } 这种写法，它和 --primary 完全脱钩。想让 hover 自动响应主色变更，必须拆解原始色值，暴露其通道供计算。
- 别再用十六进制或 rgb() 直接赋值给变量，改用
hsl()或oklch()并拆分通道：比如--primary-h: 210; --primary-s: 100%; --primary-l: 50%; - hover 效果改写为
hsl(from var(--primary) h s calc(l - 10%))，而不是另存一个--primary-hover - 注意：老项目若大量使用
rgba(59, 130, 246, 0.8)，不能直接套rgb(from ...)，因为 alpha 是独立通道；应改用新语法rgb(59 130 246 / 0.8)或统一转成hsl(from ... / 0.8)
兼容性兜底必须写在一行里，且顺序不能错
Chrome 和 Safari 技术预览版已支持 oklch() 和 color-mix()，但旧版 Safari（≤15.3）、Firefox（≤112）会直接忽略整条声明——如果你只写一行现代语法，老用户看到的就是无背景色或默认黑字。
- fallback 必须用逗号分隔，且传统语法在前、现代语法在后：
background: #3b82f6, hsl(from var(--primary) h s calc(l - 10%)); - 不要指望
var(--primary, #3b82f6)能救场：它只在变量未定义时生效，而相对色彩语法报错时变量本身仍是定义好的 - 对关键文本色，建议补一层
color-scheme: light dark;配合@media (prefers-color-scheme: dark)手动降级，避免 oklch() 失效后文字糊在背景上
第三方组件库的颜色怎么“劫持”过来
像 Ant Design、Element Plus 这类库默认不读你的 --primary，它们的 .ant-btn-primary 内部写死颜色。你没法删掉它们的 CSS，但可以覆盖。
立即学习“前端免费学习笔记（深入）”；
- 优先查文档：Ant Design v5+ 支持
css-var主题模式，开启后它会自动把--primary-color映射到内部变量 - 没支持？用
:where()提升权重 + 相对色彩重写：:where(.ant-btn-primary):hover { background: hsl(from var(--primary) h s calc(l - 12%)); } - SVG 图标填色最易漏：内联 SVG 的
fill不继承 color，必须显式写fill: var(--primary);或用currentColor并确保父元素 color 已设为相对色彩
最难的不是写出 oklch(from ...)，而是确认每一处 disabled、focus-ring、placeholder、tooltip-bg 都用了同一套派生逻辑——漏掉一个，主题切换时就会突兀地跳回旧色。重构时别信 DevTools 里那个颜色小方块，computed style 面板里看真实生效值才准。
