color-mix()等新颜色函数无法用于动态换肤动画，因其仅在声明时静态求值、不响应css变量变化、不可被transition或animation驱动，也不能嵌套在var()中；真正可动画的只有原生属性（如background-color）或view transitions api。
直接用 color-mix()、color-contrast() 和 hwb() 这类新颜色函数做动态换肤，目前不可行——它们不支持被 transition 或 animation 驱动，也不能作为 CSS 变量的运行时计算值参与主题切换。
为什么 color-mix() 不能用于主题过渡动画
color-mix() 是一个计算函数，只在声明时求值，不是响应式属性。你写 background: color-mix(in srgb, var(--primary) 70%, white);，浏览器在解析样式时就固定了结果色，后续改 --primary 不会触发重算，更不会产生过渡效果。
常见错误现象：换肤后颜色突变，无任何渐变过程；开发者误以为加了 transition: background 0.3s 就能生效，实际完全没反应。
- 它不接受变量更新作为“输入变化”，只吃字面量或已解析的 CSS 值
- 无法嵌套在
var()内部（var(--bg, color-mix(...))语法非法） - View Transitions API 也无法捕获它的中间状态，因为 DOM 层面没发生可快照的变更
真正能丝滑换肤的只有两类路径
一类靠浏览器原生支持的可过渡属性（如 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()
哪些新颜色语法其实能用，但必须配合老办法
hwb()、lab()、lch() 这些是合法的颜色值语法，可以安全写进 CSS 变量，也能被 JS 通过 style.setProperty() 动态设置，但前提是：你得自己生成它们，不能指望浏览器实时转换。
- 例如用
@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这类原生属性上才能动起来
最易被忽略的点：很多人花时间研究 color-mix() 怎么写更优雅，却没检查自己的主题切换是否真的触发了 View Transition，或者 class 是否正确作用在 html 元素上——那才是丝滑与否的分水岭，和颜色语法无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
