最可控的主题切换方式是用html[data-theme="dark"]配合BEM修饰符（如.button--primary）重定义CSS变量；不能用body.app--dark，因其导致选择器冗长、无法同步prefers-color-scheme、破坏表单可访问性且易被PurgeCSS误删。
直接用 html[data-theme="dark"] 配合 BEM 修饰符类名（如 .button--primary）重定义 CSS 变量，是最可控、最易调试的主题切换方式；别把 --dark 当全局开关塞进根元素类名里。
为什么不能用 body.app--dark 触发主题变量？
这种写法会让所有深色规则都依赖一个高权重前缀，比如 .app--dark .button--primary，结果是：
- 选择器越来越长，维护时不敢删、不敢动，怕漏掉某处嵌套
-
prefers-color-scheme: dark媒体查询无法自动同步这个类名，用户系统切暗色，页面却还是亮的 - 浏览器原生深色表单控件（如
<select>）可能被你写的.app--dark input覆盖，反而破坏可访问性 - 构建工具（如 PurgeCSS）容易误删未在 HTML 中显式出现的
.app--dark相关样式
正确做法：用 data-theme 属性 + BEM 修饰符双重驱动
核心不是“换类名”，而是“让变量在正确上下文中生效”。步骤很轻：
- JS 切换时只改
document.documentElement.dataset.theme = "dark"，不碰任何 class - CSS 中写
html[data-theme="dark"] .button--primary { --theme-color: #252525; }，而不是.button--dark { --theme-color: ... } -
.button--primary这个类名本身不声明颜色，只负责“我是一个主要按钮”，颜色由变量决定 - 所有变量必须带 fallback：
color: var(--theme-color, #007bff);，防止 JS 未执行或加载失败时白屏
.button--primary 和 data-theme="dark" 怎么配合才不冲突？
关键在选择器权重和作用域控制：
立即学习“前端免费学习笔记（深入）”；
- 禁止写
.button--primary.button--dark这种组合选择器——它既难复用，又容易因顺序或缺失导致失效 - 每个修饰符只管一件事：
.button--primary控制语义角色，html[data-theme="dark"]控制变量值，二者解耦 - 所有主题相关样式必须收在同一个 CSS 文件中，按组件组织（如
button.css），而不是按主题拆成light.css/dark.css - 如果用了 PostCSS 或 stylelint，配置
ignoreSelectors放行html[data-theme="dark"] .button--primary类型的选择器，否则会被 BEM 规则误报
容易被忽略的细节：变量 fallback 和 SSR 场景
服务端渲染（SSR）或 JS 加载前，data-theme 可能还没设置，此时变量无值。常见疏漏：
- 只写
color: var(--theme-color);，没 fallback，首屏文字变透明或继承父级色 - 在 HTML 模板里漏写初始
data-theme，比如服务端默认输出<html>而非<html data-theme="light"> - 多个主题变量（
--bg-color、--text-color）没统一 fallback 值，导致明暗切换时部分区域错色 - JS 切换主题后没触发
localStorage持久化，刷新即回退，且未监听storage事件做跨 tab 同步
