不能用BEM修饰符适配深色模式，因为--dark等修饰符违背BEM语义——深色模式是全局上下文而非组件变体；正确做法是用@media(prefers-color-scheme:dark)切换CSS自定义属性，使组件只消费变量、不感知主题。
不能用BEM修饰符适配深色模式——这不是写法问题，而是语义冲突。
为什么 .btn--dark 这类修饰符在深色模式下是错的
修饰符（Modifier）在BEM中表达的是“同一组件的变体”，比如 .btn--primary 和 .btn--disabled 都还是按钮，只是状态或用途不同。但深色模式不是按钮的变体，它是整个页面的**上下文环境切换**。把 --dark 当作修饰符，等于说“这个按钮天生属于深色背景”，可它在浅色模式里可能也要显示——逻辑上就崩了。
更实际的问题是：一旦你写了 .card--dark，后续想在深色模式下给卡片加阴影、改文字对比度、调边框粗细，这些样式就得全堆进这个类里，和主题无关的视觉逻辑（比如 --hover、--expanded）被强行耦合进来，维护时根本分不清哪些是主题相关、哪些是交互相关。
真正该用的 CSS 机制：@media (prefers-color-scheme: dark) + 原子变量
深色模式适配必须和组件结构解耦。核心是两件事：
- 所有颜色、间距、阴影等视觉值，统一走 CSS 自定义属性（
--color-bg、--shadow-sm等） - 用媒体查询批量切换这些变量值，而不是给每个组件加修饰符
示例：
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #111827;
--color-text: #e5e7eb;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
}
}
.card {
background: var(--color-bg);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
这样 .card 本身不关心深色浅色，它只消费变量；变量由环境决定。新增一个 .chart 组件？同样只写 color: var(--color-text) 就完事。
如果非要保留 BEM 类名，修饰符只能用于“非主题性状态”
比如这些是可以的：
-
.btn--loading（加载态，与主题无关） -
.input--error（表单校验态，不随主题切换而消失） -
.nav--collapsed（布局折叠态，纯结构控制）
但这些是危险的：
-
.header--dark（错误：header 在深色模式下本就该暗，这不是它的变体） -
.badge--light（错误：light 是主题输出结果，不是 badge 的固有属性）
一旦发现修饰符名里带 dark、light、night、system 这类词，基本可以判定它不该是修饰符，而该是媒体查询+变量控制的目标。
最易被忽略的一点：深色模式的变量切换必须发生在 :root 层级，且不能被组件内联样式或 JS 直接修改——否则媒体查询会失效。变量就是主题的“开关”，开关只能由环境控制，不能由组件自己乱拨。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
