color-mix()无法实现动画换肤，因其声明时求值、不响应变量变化；真正丝滑换肤需依赖可过渡的原生属性（如background-color）或View Transitions API。
它不能颠覆传统主题方案——color-mix()、lch()、hwb()这些新语法本身不参与动态换肤的“驱动逻辑”，只负责颜色表达，真正起作用的仍是变量绑定 + 原生属性过渡或 View Transitions。
color-mix() 为什么加了 transition 也没动画
color-mix() 是声明时求值函数，不是响应式计算。你写 background: color-mix(in srgb, var(--primary) 70%, white);，浏览器在解析 CSS 阶段就把它算成一个固定 RGB 值（比如 rgb(220, 230, 255)），后续改 --primary 不会触发重算，更不会触发 transition。
- 常见错误：给
background加transition: background 0.3s，换肤时颜色依然突变 - 根本原因：
color-mix()不接受变量更新作为“输入变化”，只吃字面量或已解析的 CSS 值 - 它不能嵌套在
var()里：var(--bg, color-mix(...))是非法语法
哪些新颜色语法其实能用，但必须手动控制
lch()、hwb()、lab() 是合法的颜色值，可安全赋值给 CSS 变量，也能被 JS 动态设置，但前提是：你得自己生成它们，不能指望浏览器实时转换。
- 例如用
@arco-design/color的generate()输出 LCH 色阶，再转成lch(50% 80 280)字符串塞进--primary-5 -
color-contrast()只能在color属性中当 fallback 用：color: color-contrast(var(--bg) vs black, white);，不能赋值给变量，也不能驱动过渡 - 所有新语法都绕不开一个事实：CSS 变量本身不可过渡，最终必须落到
background-color、border-color这类原生属性上
真正能丝滑换肤的只有两类路径
一类靠浏览器原生支持的可过渡属性（如 background-color、color），另一类靠 View Transitions API 捕获 DOM 状态切换——而后者根本不需要颜色函数参与。
立即学习“前端免费学习笔记（深入）”；
- 若用
class切换（如html[data-theme="dark"]），确保所有主题变量都定义在该选择器内，且每个变量都映射到真实可动画属性（比如background-color而非--bg） - 若用
document.startViewTransition()，只需包裹dataset.theme修改，CSS 中用::view-transition-old(root)控制旧主题淡出、::view-transition-new(root)控制新主题淡入 - 不要试图在
::view-transition-old里写color-mix()——它不接受函数调用，只接受基础颜色值或var()
最容易被忽略的一点是：颜色函数只是“表达层”，不是“驱动层”。换肤是否丝滑，取决于你有没有把变量最终落到可动画属性上，而不是用了多新的语法。
