color-mix()等新颜色函数无法驱动动态换肤动画，因其仅在声明时静态求值、不响应CSS变量变化、不可被transition或animation触发，也不能嵌套在var()中；真正可动画的只有原生属性（如background-color）或View Transitions API。
现代 CSS 颜色语法（color-mix()、lch()、hwb() 等）本身不能直接驱动动态换肤，因为它们不响应变量变化，也不能被 transition 或 animation 触发——换肤时颜色会突变，毫无过渡效果。
为什么 color-mix() 无法用于主题动画
color-mix() 是声明期静态计算函数，不是运行时响应式表达式。你写 background: color-mix(in srgb, var(--primary) 70%, white)，浏览器在解析样式时就固化为一个 RGB 值，后续改 --primary 不会重算，更不会触发过渡。
- 常见错误：给
background加transition: background 0.3s，但实际无任何渐变 - 它不能嵌套在
var()中（var(--bg, color-mix(...))语法非法） - View Transitions API 也无法捕获它的中间状态，因为 DOM 层面没发生可快照的变更
哪些新颜色语法能用，但必须配合传统路径
lch()、hwb()、lab() 是合法的颜色值，可以安全赋值给 CSS 变量，并被 JS 动态设置；但前提是：你得自己生成它们的字符串，不能指望浏览器实时转换。
- 例如用工具库（如
@arco-design/color）预生成 LCH 色阶，再通过style.setProperty('--primary', 'lch(50% 80 280)')注入 -
color-contrast()只能在color属性中作 fallback 使用，不能赋值给变量，也不参与过渡 -
hsl()仍是当前最实用的选择：语义清晰、兼容性好（Chrome 106+ / Safari 16.4+ / Firefox 117+），且能和自定义属性无缝配合
真正可动画的换肤路径只有两类
所有“丝滑换肤”都绕不开这个事实：只有原生可过渡属性或 View Transitions 才能产生视觉过渡。新颜色函数只是“值的来源”，不是“动画载体”。
- 路径一：靠可动画属性本身 —— 把主题色最终映射到
background-color、color、border-color等原生属性上，再加transition - 路径二：靠 View Transitions —— 用
document.startViewTransition(() => { el.dataset.theme = 'dark' })，CSS 中用::view-transition-old(root)控制旧状态淡出 - 关键限制：
::view-transition-old和::view-transition-new只接受基础颜色值或var()，不能写color-mix()或其他函数调用
最容易被忽略的一点：换肤是否“动态”，取决于你如何组织变量与属性之间的映射关系，而不是用了多少新语法。哪怕只用 hsl() + var()，只要把 H/S/L 拆开控制、按需组合，就能实现通道级调控；而堆砌 color-mix() 却不绑定到可动画属性，结果只是静态换色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
