CSS变量无法直接过渡，因浏览器仅对原生属性（如background-color）执行插值动画；正确做法是将transition写在使用变量的选择器中，并为两端指定具体颜色值。
不能直接对 CSS 变量加 transition，比如写 transition: --bg-color 0.3s 完全无效——浏览器会忽略它，颜色依然跳变。
为什么 transition: --color-bg 不起作用
CSS 变量本身不是可动画属性，它的更新是原子性的：值一改，所有用到它的地方立刻重算、立刻重绘，中间没有插值过程。浏览器只对 background-color、color、border-color 这类原生属性做过渡，且要求两端都是明确的、可插值的颜色值（如 #ffffff ↔ #121212）。
-
transparent、inherit、initial任一端出现，插值就会中断或失效 - 写在
:root或.dark类里单独加transition没用——必须写在“使用变量”的那个选择器的基础规则中 -
@media (prefers-color-scheme: dark)触发的是样式重匹配，不触发属性级动画
正确写法：把 transition 放在默认状态的选择器里
比如你用 body 作为主题载体，就得这样写：
body {
background-color: #ffffff;
color: #333333;
transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
}
body.dark {
background-color: #121212;
color: #e0e0e0;
}
- 所有参与过渡的属性，必须在默认态和
.dark态都写死具体值，不能留空或靠继承 - 时长推荐 300–450ms；
ease-in-out比ease更柔和，适合主题切换 - 如果用
data-theme="dark"，对应选择器要写成html[data-theme="dark"] body或[data-theme="dark"] body，且优先级不能低于默认规则
用 CSS 变量时，如何避免重复写 transition
如果你坚持用 :root 管理变量（比如 --bg-color），又想复用过渡逻辑，就得把 transition 显式加到每个用到变量的地方：
立即学习“前端免费学习笔记（深入）”；
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.4s ease, color 0.4s ease;
}
.card {
background-color: var(--card-bg);
color: var(--card-text);
transition: background-color 0.4s ease, color 0.4s ease;
}
- 别指望一个
:root { --transition: background-color 0.4s; }能自动生效——transition属性不接受变量注入 - 可以提取通用类，比如
.theme-transition，统一挂载到需要过渡的元素上 - 若部分元素靠继承获得颜色（没显式声明
background-color），过渡不会触发——必须显式写出属性
最容易被忽略的不是“怎么写 transition”，而是“什么时候执行 class 切换”：document.documentElement.classList.toggle('dark') 必须在变量已定义、基础样式已加载、transition 已声明的前提下执行，否则首屏必闪。
