最可控的方式是用html[data-theme="dark"]配合bem修饰符重定义css变量；不能将--dark作为bem修饰符硬写在组件类名中，因其违背修饰符仅描述组件自身状态的契约，导致语义错位、复用断裂、ssr白屏及purgecss误删。
直接用 html[data-theme="dark"] 配合 BEM 修饰符（如 .button--primary）重定义 CSS 变量，是最可控、调试最直观的实现方式；硬写 .button--dark 这类主题修饰符反而会破坏语义、增加维护成本。
为什么不能把 --dark 当 BEM 修饰符用
BEM 修饰符只描述组件自身状态或变体（比如 --disabled、--loading），不是系统级上下文。把 --dark 塞进组件类名，会立刻引发三类问题：
-
.button--dark暗示按钮“自己处于深色状态”，但深色模式是全局偏好，不是按钮的交互态 —— 违背 BEM “修饰符只表达块自身特征”的契约 - 所有组件都得配一套
--dark版本：.card--dark、.input--dark、.header--dark……改主色时得搜遍整个项目，变量完全无法联动 - PurgeCSS 默认只保留 HTML 中显式出现的 class；用户首次访问是亮色模式，
.button--dark从没在 DOM 里出现过，相关样式大概率被干掉 - SSR 渲染时 JS 尚未执行，
data-theme没设，但.button--dark类已存在，样式却没加载，按钮直接白底黑字错色
正确做法：用 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 修饰符本身不解决主题切换，它只是提供了一个干净的钩子。关键在于把变量作用域锚定在 html，并确保所有主题相关变量都在同一份 CSS 文件中按组件维度组织，而非按主题维度拆分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
