CSS暗黑模式切换丝滑的关键是将transition作用于background-color、color等可动画属性，而非CSS变量或:root；需显式声明每个用到变量的元素的过渡效果，避免all过渡和opacity障眼法。
transition 用在哪儿才真正生效
CSS 暗黑模式切换丝滑与否，核心不在 prefers-color-scheme 或 JS 切换 class，而在 transition 是否作用于实际变化的属性上。很多人把 transition: all 0.3s 往 :root 或 body 上一塞就以为完事——其实没用，因为 CSS 变量（比如 --bg、--text）本身不触发重绘，transition 对它们完全无效。
必须把过渡效果“落地”到真实会渲染的属性上：
-
background-color、color、border-color这类可动画属性必须显式声明过渡 - 如果用 CSS 变量控制主题，就得在每个用到变量的地方做映射 + 过渡，例如：
.card { background-color: var(--bg-card); transition: background-color 0.4s ease; } - 避免对
:root设置transition，它不会让变量变化产生动画
color-scheme 和强制色域切换的兼容性陷阱
color-scheme: light dark 告诉浏览器你的页面支持哪些系统色系，但它不控制颜色值，也不触发过渡。更关键的是：它只影响表单控件（<input>、<button></button>）、滚动条、默认焦点环等原生元素的“自动配色”，和你自定义的 --bg 没半点关系。
容易踩坑的点：
立即学习“前端免费学习笔记（深入）”；
- 在 Safari 上，
color-scheme不会触发matchMedia回调，JS 无法监听其变化 - Chrome 111+ 开始支持
forced-colors媒体查询，但它的优先级高于prefers-color-scheme，如果你没处理，深色模式下用户开启“高对比度”反而会让所有过渡失效（因为浏览器直接覆盖样式） - 别依赖
color-scheme实现主题切换逻辑，它只是辅助声明，不是执行器
JS 切换主题时如何避免闪屏和卡顿
手动切换 class（比如从 theme-light 切到 theme-dark）时，如果新样式还没加载或计算完成，浏览器会先按旧样式渲染一帧，再跳变——这就是闪屏。根本原因不是 JS 慢，而是样式层没有“预热”。
实操建议：
- 确保所有主题相关 CSS 已内联或同步加载，不要靠
@import或异步<link>引入暗色规则 - 切换前先用
getComputedStyle触发一次重排（可选），但更稳妥的是加一层transform: scale(0.999)强制合成层，让过渡走 GPU - 不要用
setTimeout延迟 class 切换，那只会让闪屏更明显；改用requestAnimationFrame确保在下一帧开始前完成 class 更新 - 示例关键片段：
document.documentElement.classList.remove('theme-light');<br>requestAnimationFrame(() => {<br> document.documentElement.classList.add('theme-dark');<br>});
为什么 opacity 过渡看起来“假”，而 color/background 却自然
用 opacity 模拟主题切换（比如淡出再淡入）本质上是障眼法：它不改变颜色值，只是叠了一层透明度，用户能感知到内容“虚化”，尤其文字边缘发毛，和真正的深色/浅色语义不符。
真正丝滑的关键是颜色值本身的连续插值：
-
background-color从#ffffff到#1e1e1e是线性 RGB 插值，浏览器优化充分，GPU 加速稳定 - 但如果你用了
hsl()或lab()定义变量（比如--bg: hsl(210 10% 98%)→hsl(210 20% 12%)），过渡会更符合人眼感知，比纯 RGB 更匀速 - 避免在
transition中混用单位（比如color: #000和color: rgba(0,0,0,0.9)），会导致浏览器放弃插值，直接跳变
最麻烦的其实是字体抗锯齿和 subpixel rendering 在不同背景色下的表现差异——这没法用 CSS 过渡解决，只能接受它。只要颜色过渡本身是连贯的，用户就不会觉得“卡”，其余都是细节里的耐心。
