最可控的主题切换方式是用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></select>）可能被你写的 .app--dark input 覆盖，反而破坏可访问性
• 构建工具（如 PurgeCSS）容易误删未在 HTML 中显式出现的 .app--dark 相关样式

正确做法：用 data-theme 属性 + BEM 修饰符双重驱动

核心不是“换类名”，而是“让变量在正确上下文中生效”。步骤很轻：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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，比如服务端默认输出 而非
• 多个主题变量（--bg-color、--text-color）没统一 fallback 值，导致明暗切换时部分区域错色
• JS 切换主题后没触发 localStorage 持久化，刷新即回退，且未监听 storage 事件做跨 tab 同步

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！