移动端换肤无法用transition直接过渡CSS变量，因规范不支持；可行方案是View Transitions API实现真平滑，或[data-theme]+完整变量声明+fallback降级。
移动端页面平滑无刷新换肤，不能靠 transition 直接过渡 CSS 变量——浏览器根本不支持。真正能落地的方案只有两个：用 document.startViewTransition() 接管视觉帧，或用 [data-theme] + 完整变量声明 + fallback 实现“伪平滑”（靠浏览器重绘节奏掩盖卡顿）。
为什么直接给 :root 变量加 transition 会失效
CSS 规范明确不支持 --xxx 自定义属性作为 transition 的可动画属性。即使你写成：
:root {
--bg: #fff;
transition: --bg 0.3s;
}
.theme-dark {
--bg: #121212;
}
这段代码在 Chrome/Firefox/Safari 全部无效。常见错误现象是：点击切换后颜色突变、无过渡、甚至部分区域白屏或透明——因为未定义变量 fallback 失败。
-
transition只对标准属性生效（如color、background-color、transform） - CSS 变量是静态求值的，修改变量值 ≠ 修改已计算出的样式；浏览器不会为变量变化触发重绘帧调度
- 旧版 Safari（iOS 15.4 之前）连
matchMedia都可能异步延迟，加剧 FOUC
用 View Transitions API 实现真平滑切换
这是目前唯一能让“换肤看起来像动画”的原生方案，但要求 DOM 更新必须同步、且只在支持该 API 的浏览器中生效（Chrome 111+、Edge 111+、Firefox 117+，Safari 尚未支持）。
立即学习“前端免费学习笔记（深入）”；
- 必须把
data-theme切换动作包进document.startViewTransition()回调里，不能提前或延后执行 - 不能在回调外手动设置
document.documentElement.setAttribute('data-theme', ...)，否则绕过过渡 - CSS 中只需定义
::view-transition-old(root)和::view-transition-new(root)的transform/opacity动画，不涉及任何变量 - 第三方组件库（如 Ant Design、MUI）若自行操作
:root变量，会与你的 view transition 冲突，需禁用其主题逻辑或用[data-theme]强制覆盖
兼容性兜底：[data-theme] + 完整变量声明 + fallback
当 View Transitions 不可用时，这是最稳的降级方案。关键不是“怎么动”，而是“怎么不崩”。
-
:root必须预先声明全部主题变量，默认值 + fallback 缺一不可：background-color: var(--bg, #ffffff) - 所有
@media (prefers-color-scheme: dark)块内，必须重置整套变量，不能只改几个——否则组件提前读取未定义变量会 fallback 到透明 - 手动切换时，只操作
document.documentElement.setAttribute('data-theme', 'dark')，不碰matchMedia或媒体查询 - 第三方组件必须用
[data-theme="dark"] .component-class这类高优先级选择器接管，不能依赖它们自己的暗色检测逻辑
真正容易被忽略的点是：变量声明顺序和 fallback 不是锦上添花，而是换肤不白屏的底线。很多人写了几十行 JS 切换逻辑，却在 :root 里漏掉一个 var(--border-color, #e0e0e0)，结果某个按钮边框直接消失——这不是动画没起来，是样式链断了。
