最可控的主题切换方式是用html[data-theme="dark"]配合bem修饰符重定义css变量；不能把--dark当bem修饰符硬写在组件上，因其导致语义错位、复用断裂、ssr风险及purgecss误删。
直接用 html[data-theme="dark"] 配合 BEM 修饰符重定义 CSS 变量，而不是把主题写成 .button--dark 这类修饰符——后者会破坏语义、复用断裂、SSR 失效，且被 PurgeCSS 误删。
为什么不能把主题当 BEM 修饰符用（比如 .button--dark）
BEM 的 -- 修饰符只该表达组件自身的状态或变体（如 .button--disabled），不是系统级外观偏好。写 .button--dark 看似省事，实际带来三类硬伤：
- 语义错位：
--dark描述的是用户系统设置或手动切换的全局主题，不是按钮“自身状态”，违背 BEM “块-元素-修饰符”契约 - 样式复用断裂：深色模式下所有组件都得重复写一套
--dark版本，.button--primary、.card--highlighted全要配颜色、边框、阴影，无法靠变量联动 - 构建与 SSR 风险：PurgeCSS 默认只保留 HTML 中显式出现的 class；若用户首次访问是亮色模式，
.button--dark从未渲染，相关样式大概率被删；SSR 渲染时 JS 未执行，data-theme缺失，但.button--dark类已存在却无对应样式，视觉错乱
html[data-theme="dark"] 怎么和 BEM 修饰符配合
核心是分工：BEM 修饰符管“我是什么角色”，data-theme 管“当前上下文长什么样”。两者解耦，才能正交协作：
- JS 切换主题时只改
document.documentElement.dataset.theme = "dark"，不操作任何 class 名 - CSS 中写
html[data-theme="dark"] .button--primary { --btn-bg: #333; --btn-text: #fff; }，不是.button--dark { background: #333; } -
.button--primary自身不声明颜色，只表达“这是一个主要操作按钮”，颜色由变量决定 - 所有变量必须带 fallback：
background-color: var(--btn-bg, #007bff);，防止 JS 加载失败或 SSR 首屏白屏
容易踩的坑：变量作用域 + 选择器权重失控
常见错误不是语法写错，而是变量没在正确上下文中覆盖，或选择器层级被意外打断：
- 只在
:root[data-theme="dark"]里改了--text-color，却漏掉--card-bg和--input-border，导致部分组件仍用亮色值 - 写了
.app--dark .button--primary这种高权重选择器，结果后续加的.button--loading样式被压制，加载态图标颜色不变 - 多个主题文件分开打包（
theme-light.css/theme-dark.css），加载顺序不确定，后加载的 CSS 覆盖前者的变量定义 - 用了
body.app--dark而非html[data-theme]，导致prefers-color-scheme: dark媒体查询无法自动同步，也破坏原生表单控件可访问性
真正难的不是怎么写 data-theme，而是确保每个组件的所有变量都在对应主题上下文中被完整重定义——漏一个，就有一处颜色卡在旧主题里，而且很难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
