CSS自定义属性（如--bg）本身不可过渡，因它只是值容器；必须将变量应用于具体渲染属性（如background-color）并为其设置transition，才能实现平滑主题切换。
transition 为什么对 :root 变量无效
直接给 :root 设置 transition 没用，因为 CSS 自定义属性本身不触发重绘——它只是个“值容器”，变的是 JS 或媒体查询里赋的值，浏览器不会自动监听变量变化并补帧。
真正要过渡的，是那些**实际影响渲染的属性**，比如 background-color、color、border-color 等。所以得把变量“倒出来”再过渡：
- 在主题 class（如
.theme-dark）里，用var(--bg)赋给具体属性，并统一加transition: background-color 0.3s ease, color 0.3s ease - 避免写成
:root { transition: --bg 0.3s; }—— 这行代码完全被忽略，CSS 规范不支持变量名作为可过渡属性 - 如果主题切换靠 JS 动态改
document.documentElement.style.setProperty，记得同步更新所有依赖该变量的元素样式，或改用 class 切换更稳妥
如何让全站颜色随主题平滑过渡
关键不是“过渡变量”，而是“过渡使用变量的地方”。典型做法是：定义一套语义化变量（--color-primary、--bg-surface），然后在大量组件中用这些变量，再为每个组件的关键颜色属性显式声明 transition。
常见遗漏点：
立即学习“前端免费学习笔记（深入）”；
- 按钮、输入框等表单控件的伪元素（
::placeholder、::before）容易漏加transition - SVG 内联颜色（
fill、stroke）需单独加过渡，不能指望父级 class 带过去 - 用
filter: invert()或hue-rotate()做主题的方案，无法过渡——滤镜不支持transition，必须换回颜色变量方案
示例：一个卡片组件的颜色过渡写法
card {
background-color: var(--bg-surface);
color: var(--text-primary);
transition: background-color 0.25s ease, color 0.25s ease;
}
prefers-color-scheme 切换时没有过渡怎么办
系统级暗色模式切换（如 macOS 控制中心开关）会直接触发 @media (prefers-color-scheme: dark)，但这个过程默认无动画——CSS 媒体查询不触发过渡，它只是“瞬间重算样式”。
解决思路只有两个：
- 放弃纯 CSS 方案，用 JS 监听
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)，手动加 class 并触发过渡类（如theme-transitioning） - 在根元素上预设过渡，例如
html { transition: background-color 0.4s ease; }，并在媒体查询里确保所有用到变量的地方都已声明过渡 —— 这样虽然媒体查询本身不过渡，但样式重算后仍能走 CSS 过渡管线 - 注意 Safari 对
prefers-color-scheme的 change 事件支持较晚（iOS 14+/macOS 11+），旧版本需降级为手动切换
transition-duration 设太长反而卡顿的原因
超过 300ms 的过渡，在快速连续切换主题时（比如连点两次主题按钮），容易因过渡未结束就覆盖新状态，导致视觉卡顿或颜色“跳变”。这不是 bug，是 CSS 过渡队列行为。
- 推荐值域：200–300ms；超过 350ms 就该考虑是否真需要这么慢，用户感知延迟明显
- 用
transition-timing-function: ease比linear更自然，但别用复杂贝塞尔曲线（如cubic-bezier(0.17, 0.67, 0.83, 0.67)），它会让中间段速度不稳，放大卡顿感 - 慎用
transition: all 0.3s—— 它会把所有可过渡属性（包括transform、opacity）一并动起来，可能引发意外重排或 GPU 切换开销
过渡不是越慢越高级，它是用户操作与视觉反馈之间的信任契约。快一点，但别突兀；慢一点，但要确定它真在动。
