CSS变量无法被transition直接驱动，因其更新是原子性的；需在基础选择器中为具体属性（如background-color）声明transition，并确保深色/浅色模式下均使用可插值的具体颜色值。
为什么直接用 CSS 变量 + @media (prefers-color-scheme: dark) 切换没有过渡动画
CSS 变量本身不能被 transition 直接驱动——浏览器只对最终计算出的属性值（比如 background-color: #fff → #121212）做插值，而变量更新是原子性的。你写 background-color: var(--bg-color)，再在媒体查询里改 --bg-color，颜色会瞬间跳变。
- 过渡必须作用于具体颜色值，不是变量名
-
@media触发的是样式规则重匹配，不触发属性级动画 - 除非你在每个用到变量的地方都手动加
transition，且确保两端都是可插值颜色（如不能一端是transparent）
怎样让深色模式切换真正平滑：把 transition 写在基础选择器里
关键不是“怎么切”，而是“在哪声明过渡”。把 transition 放在默认状态规则中，而不是只放在 .dark 类里：
body {
background-color: #ffffff;
color: #333333;
transition: background-color 0.3s ease, color 0.3s ease;
}
body.dark {
background-color: #121212;
color: #e0e0e0;
}
- 所有参与过渡的属性（
background-color、color、border-color）必须在默认态和.dark态都写死具体值 - 避免用
inherit、transparent或initial，它们无法插值 - 时长推荐 300–450ms，
ease-in-out比ease更自然
手动切换时，data-theme 和 .dark 类哪个更可靠
用 document.documentElement.classList.toggle('dark') 是最轻量、最可控的方式；data-theme="dark" 本身不触发样式重算，必须配合选择器（如 [data-theme="dark"] { --bg: #121212; }）且优先级要高于默认 :root 声明。
- 类名切换不依赖框架，无兼容风险，
:hover、@keyframes等行为完全正常 - 如果用
data-theme，必须确保 CSS 选择器写对位置：html[data-theme="dark"] :root不生效，正确写法是html[data-theme="dark"]或[data-theme="dark"]直接覆盖:root - 别只设
data-theme就完事——漏掉 class 切换或没同步localStorage，刷新后主题就丢了
初始化阶段最容易闪屏：DOM 加载前就得设置 class
页面白底闪一下再变黑，90% 是因为 class 在 DOMContentLoaded 之后才加。必须在 <head> 里尽早执行初始化逻辑：
立即学习“前端免费学习笔记（深入）”；
<script>
const root = document.documentElement;
const savedTheme = localStorage.getItem('theme') || 'light';
if (savedTheme === 'dark') {
root.classList.add('dark');
}
</script>
- 这段脚本要放在所有 CSS 之前，最好 inline 写在
<head>顶部 - 用户点击按钮切换时，除了
toggle('dark')，必须立刻localStorage.setItem('theme', newTheme) - 别用
document.documentElement.style.setProperty()动态改变量——它会覆盖整个:root声明，后续媒体查询失效，维护成本爆炸
localStorage、以及 CSS 中所有用到颜色的地方都定义了明确的起止值。少一个，过渡就断。 
