transition必须写在基础默认样式中，而非仅.dark类里；否则初始态无过渡声明导致跳变，且需确保颜色值可插值、CSS变量不直接参与动画、伪元素等子元素单独声明transition。
transition 必须写在默认样式里，不能只放在 .dark 类中
写了 transition: background-color 0.4s 却还是闪一下？大概率是因为你只把它加在了 .dark 类里。浏览器过渡行为只看“起始状态”有没有声明 transition，目标状态写了没用。默认样式（比如 body 或 :root 下的元素）必须显式带上过渡规则。
常见错误写法：.dark { background-color: #121212; transition: background-color 0.4s; }
这会导致第一次切换时直接跳变——因为初始态没过渡声明。
- 正确位置：写在未加主题类的基础选择器中，例如
body、.container或通用工具类 - 不要依赖
@media (prefers-color-scheme: dark)做手动切换的过渡，它不响应 JS 触发的 class 切换 - 如果用
data-theme="dark"，确保过渡也写在[data-theme="light"]或无属性的默认规则里，而不是仅写在[data-theme="dark"]中
颜色值必须两端可插值，避免 transparent / inherit / unset
background-color: transparent → background-color: #121212 在部分 Safari 版本中会跳变；color: inherit 没有明确计算值，浏览器无法插值。过渡失效往往不是语法错，而是值不可动画。
- 起点推荐用
rgba(255, 255, 255, 0)替代transparent，终点用实色如rgba(18, 18, 18, 1) - 统一用
hsl()写法（如hsl(0, 0%, 100%)→hsl(0, 0%, 10%)），比十六进制更顺滑，尤其跨明暗大跨度时不会经过脏灰阶 - CSS 变量（
var(--bg-color)）本身不能被transition驱动，必须保证使用该变量的属性（如background-color）两端都是可插值的具体颜色值
用 CSS 变量管理主题时，transition 要落到具体元素上
很多人以为给 :root 设置 --bg-color，再在 body 上写 background-color: var(--bg-color) 就能靠一个 transition: --bg-color 0.4s 实现过渡——这是无效的。--bg-color 是自定义属性名，浏览器根本不支持对它做插值。
- 真正要加
transition的是background-color、color这类原生属性，且必须在它们的宿主元素上声明 - 如果多个组件都用
var(--text-color)，就得每个组件或其父容器单独加transition: color 0.4s - 伪元素（
::before/::after）和color: inherit的子元素不会继承父级的transition，必须显式重写
首屏不闪的关键：localStorage 读取必须前置到 <head> 中
用户点一次按钮切到深色模式，刷新页面又变回亮色？或者刚打开页面时白一下再变黑？说明主题初始化太晚。DOM 渲染完成前，浏览器已按默认样式画了一帧。
立即学习“前端免费学习笔记（深入）”；
- 把读取
localStorage.getItem('theme')和设置document.documentElement.classList.add('dark')的逻辑放进<head>里的内联<script>，越早越好 - 不要等
DOMContentLoaded或load事件，那已经晚了 - 如果用
data-theme，同样要同步设置document.documentElement.setAttribute('data-theme', 'dark')，且确保 CSS 选择器优先级足够（比如用html[data-theme="dark"]而非仅[data-theme="dark"]）
document.documentElement.classList.toggle('dark') 这一行执行后，浏览器只有在所有变量已定义、所有目标属性两端值明确、所有相关元素都声明了 transition 的前提下，才会启动平滑过渡。漏掉任意一环，就只剩跳变。 
