主题切换时class操作对象必须匹配css选择器主体：若css规则为body.dark则操作document.body，若为html.dark或:root.dark则必须操作document.documentelement，否则样式不生效。
主题切换时 class 操作对象必须匹配 CSS 选择器主体
很多人切主题后样式没变，翻控制台发现 html 或 body 标签上压根没加对应 class。根本原因是 JS 操作的 DOM 节点和 CSS 规则绑定的位置不一致。比如你写了 body.dark .button，却去调 document.documentElement.classList.toggle('dark')，那规则永远不生效。
检查现有 CSS 主题规则的选择器前缀：
- 如果规则是
body.dark或.dark .card，就操作document.body - 如果规则是
html.dark或:root.dark，必须操作document.documentElement - 若项目混用（比如部分组件依赖
body.dark，主题变量又挂在:root），先统一到html上——body在某些浏览器中会被重置样式干扰，且无法影响::before、svg填色等
classList.toggle() 是唯一安全的 class 切换方式
别用 className = 'dark' 赋值，它会清空所有已有 class，比如原本的 js-initialized u-hidden 全丢；也别用 classList.add() + classList.remove() 组合，得手动判断状态，容易漏判或重复触发。
toggle() 自动识别当前是否存在目标 class，一行解决「有则删、无则加」，且不影响其他 class：
document.documentElement.classList.toggle('theme-dark');
注意：这个方法只改变 class 列表，不负责同步 localStorage 或更新 <meta name="color-scheme">，那些得单独做。
CSSOM 中 class 切换与 CSS 变量不能混用
如果你用 document.documentElement.style.setProperty('--bg-color', '#121212') 动态改变量，就别再写 .theme-dark :root { --bg-color: #121212 } 这类规则——两者逻辑冲突，浏览器会按层叠顺序取值，但无法保证变量重计算时机一致，尤其在动画过渡中容易卡顿或跳变。
二选一才是稳定做法：
- 纯 class 驱动：所有主题变量都定义在
:root下，靠.theme-dark :root覆盖，JS 只管切 class - 纯 JS 驱动：变量全由
style.setProperty()设置，CSS 里只留默认:root声明，不写任何主题 class 规则
混合写法常见于旧项目迁移，但每次切换都要手动同步两套状态，极易出错。
data-theme 属性比 class 更适合语义化主题管理
用 class="theme-dark" 容易和框架类（如 Tailwind 的 dark:）、BEM 块名（如 card__header）或工具类（如 u-p-4）冲突，特异性打架、覆盖难控。
换成 data-theme 就干净得多：
document.documentElement.setAttribute('data-theme', 'dark');
CSS 中对应写成：
html[data-theme="dark"] { --bg-color: #121212; }
关键点：
- 必须带
html前缀，否则权重不够，:root规则可能被覆盖 -
data-属性天然语义隔离，服务端渲染可直接写死在上，首屏不闪 - fixed 元素、伪元素、SVG 填色都能响应，因为它们都继承自
html节点的作用域
真正麻烦的不是切换动作本身，而是变量作用域、选择器权重、DOM 节点归属这三者没对齐——只要一个错位，主题就只在局部生效，或者干脆静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
