最可控的方式是用 html[data-theme="dark"] 配合 bem 修饰符重定义 css 变量；主题应作为全局上下文由 data-theme 控制，bem 修饰符仅描述组件自身状态，二者职责必须解耦，避免语义错位、复用断裂、ssr 白屏及 purgecss 误删。
最可控的方式是用 html[data-theme="dark"] 配合 BEM 修饰符（如 .button--primary）重定义 CSS 变量；别把主题当修饰符硬塞进组件类名里，否则语义错位、复用断裂、SSR 白屏、PurgeCSS 误删全会找上门。
为什么不能写 .button--dark 这类主题修饰符
这不是“不够优雅”的问题，而是立刻引发维护断裂：
-
.button--dark暗示按钮自身处于“深色状态”，但深色模式是系统级上下文，不是按钮的交互态或变体——违背 BEM “块-元素-修饰符”中修饰符只描述组件自身状态的契约 - 所有组件都得配一套
--dark版本：.card--dark、.input--dark、.header--dark……改主色时要搜遍整个项目，变量完全无法联动 - PurgeCSS 默认只保留 HTML 中显式出现的 class；用户首次访问是亮色模式，
.button--dark从没在 DOM 里出现过，相关样式大概率被干掉 - SSR 渲染时 JS 尚未执行，
data-theme还没设，但.button--dark类已存在，样式却没加载，按钮直接白底黑字错色
正确做法：用 html[data-theme] 控制变量作用域，BEM 修饰符只管角色
主题和组件职责必须解耦——data-theme 提供外观上下文，.button--primary 只声明“这是主操作按钮”：
- JS 切换时只改
document.documentElement.dataset.theme = "dark"，不操作任何class - CSS 中写
html[data-theme="dark"] .button--primary { --btn-bg: #1e1e1e; --btn-text: #f0f0f0; }，而不是.button--dark { background-color: #1e1e1e; } -
.button--primary自身不写具体颜色，只用background-color: var(--btn-bg, #007bff);，fallback 必须带，防 JS 失效或 SSR 首屏白屏 - 禁用态写成
.button--primary.button--disabled组合，但.button--disabled只控制opacity和pointer-events，不碰颜色变量
变量重定义范围容易漏，权重失控更难察觉
常见错误不是语法写错，而是变量没在正确上下文中覆盖，或选择器层级意外打断：
- 只在
:root下改了--text-color，却漏掉--card-bg、--input-border、--link-hover，导致卡片仍是白底、输入框边框还是浅灰 - 写了
.app--dark .button--primary这种高权重选择器，结果后续加的.button--loading样式被压制，加载图标颜色不变 - 多个主题文件分开打包（
theme-light.css/theme-dark.css），加载顺序不确定，后加载的 CSS 覆盖前者的变量定义 - 用了
body.app--dark而非html[data-theme]，导致prefers-color-scheme: dark媒体查询无法自动同步，也破坏原生表单控件可访问性
BEM Modifier 必须绑定到 Block，不能作用于 Element
很多人写 .header__logo--dark，以为这样就能切换 logo 颜色，结果样式不生效或覆盖混乱——因为 BEM 规范里 Modifier 的语义归属必须清晰：
- 主题是整个组件的变体，不是某个子元素的独立状态；
--dark必须加在 Block 上（如.header--theme-dark），让内部所有 Element 通过继承响应 -
.header--theme-dark .header__logo才是正确写法；禁止.header__logo--theme-dark——它破坏统一性，也增加维护成本 - 所有主题变量注入必须靠 CSS Custom Properties 实现：
.header--theme-dark只负责重置--header-bg、--header-text等变量，.header__logo直接用color: var(--header-text);，不感知主题 - Modifier 必须加在 Block 容器上，不是全局
——除非你真打算全站统一切换；多数场景是局部组件（如.card）自己管理主题
真正容易被忽略的是：BEM 修饰符本身不解决主题切换，它只是提供了一个干净的钩子。关键在于把变量作用域锚定在 html，并确保每个主题分支下所有相关变量一次性重定义——漏一个，整条链路就断在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
