纯CSS主题色缓动的关键是给使用变量的属性（如color、background-color）加transition，而非给CSS变量本身；JS仅切换data-theme等状态，由CSS响应并插值。
用 CSS 变量 + transition 控制主题色缓动
纯 CSS 实现主题切换时的颜色平滑过渡，关键不是改 background-color 或 color 本身，而是让这些属性响应 CSS 自定义变量的变化——而变量值由 JS 切换，CSS 负责监听并补间。
常见错误是直接对 :root 里一堆颜色变量加 transition，但变量本身不触发重绘，加了也无效。真正要加 transition 的，是那些**实际使用了变量的属性**，比如：
color: var(--text-primary);background-color: var(--bg-surface);
只要这些属性在不同主题下取值不同，且你给它们写了 transition，浏览器就会自动插值。
为什么 transition 必须写在具体选择器里，不能只写在 :root
CSS 变量不是“可动画属性”，它只是值容器。浏览器动画引擎只对能产生视觉渐变的属性（如 opacity、transform、color）做插值计算。所以即使你把 --primary 从 #007bff 换成 #28a745，若没在用它的元素上声明 transition: color 0.3s ease，颜色就是瞬切。
立即学习“前端免费学习笔记（深入）”；
典型场景：深色/浅色模式切换后，按钮文字和背景色都跳变，就是因为只改了变量，没在 .btn 类里写 transition。
实操建议：
- 在所有可能随主题变化的样式规则里，显式加上
transition，例如：.header { color: var(--text-title); transition: color 0.25s ease; } - 避免用
transition: all 0.3s，它会拖慢性能，尤其在滚动或悬停频繁的元素上 - 如果某元素只在主题切换时变色、其余时间不变，可以只给它加
transition，不用全局统一
prefers-color-scheme 媒体查询无法触发缓动？
系统级暗色模式切换（比如 macOS 控制中心点一下）会触发 @media (prefers-color-scheme: dark)，但它本身不带过渡逻辑。浏览器只是立刻重算样式，不会自动补间。
想让它也缓动，必须把媒体查询里的颜色定义，落到「有 transition 的元素」上。也就是说，@media 本身不负责动画，只负责提供新值；动画靠元素自身的 transition 属性生效。
容易踩的坑：
- 以为写了
@media (prefers-color-scheme: dark) { :root { --bg: #121212; } }就够了——其实不够，还得确保body { background-color: var(--bg); transition: background-color 0.3s; } - 在
:root里用transition: --bg 0.3s——这是无效语法，CSS 不支持对变量名做 transition - 用
will-change: background-color试图优化，但没实际效果，反而可能引发渲染异常
JS 切换主题时，如何避免闪屏或卡顿
闪屏通常发生在 JS 批量修改多个 class 或反复操作 document.documentElement.style 时，导致样式重排重绘被打断。
推荐做法是：用一个 class 控制整个主题状态，比如 data-theme="dark"，然后所有颜色变量都在 CSS 里通过该属性条件定义：
:root[data-theme="light"] {
--text-primary: #333;
--bg-surface: #fff;
}
:root[data-theme="dark"] {
--text-primary: #eee;
--bg-surface: #1e1e1e;
}
这样 JS 只需执行 document.documentElement.setAttribute('data-theme', 'dark')，一次 DOM 更新，样式批量生效。再配合上面说的各元素 transition，就能稳稳缓动。
注意点：
- 不要用
style.setProperty()逐个设变量，那会触发多次样式计算 - 如果用了 CSS-in-JS 库（如 Emotion），确认它支持将主题变量注入到
:root并保留 transition 链路 - 某些旧版 Safari 对
color的transition支持不稳定，可加transition: color 0.3s linear, background-color 0.3s linear显式声明
最复杂的其实是多层嵌套组件里颜色继承关系——父元素过渡了，子元素却没写 transition，或者用了 currentColor 但忘了它也会被插值，这些细节一漏，缓动就断在某个角落。
