使用 html[data-theme] 是唯一同时满足 ssr 安全、prefers-color-scheme 同步、purgecss 可靠保留和原生控件兼容的主题方案；禁用 body--dark 等 class 写法，bem 修饰符只管状态不管主题，品牌与明暗需分层控制，变量必须带 fallback 且媒体查询与 js 协同生效。

用 html[data-theme] 而不是 .body--dark 或 .app--dark

直接给 html 元素加 data-theme 属性，是唯一能同时满足 SSR 安全、prefers-color-scheme 同步、PurgeCSS 可靠保留、原生控件兼容的方案。写 body--dark 或 app--dark 会立刻导致选择器权重失控、系统偏好不同步、表单控件颜色异常。

常见错误现象：body--dark .button--primary 这类高权重选择器，后续加 .button--loading 时样式被压制；prefers-color-scheme: dark 触发后 JS 没监听或漏同步，页面一半深一半浅。

• document.documentElement.dataset.theme = "dark" 是唯一推荐的 JS 切换方式，不操作任何 class
• SSR 渲染时若未设 data-theme，所有变量 fallback 值必须可用（如 var(--bg-color, #fff)）
• 禁用 body.app--dark 写法：它破坏语义、干扰可访问性、且无法驱动 CSS 变量更新

BEM 修饰符只管状态，不管主题

--primary、--disabled、--loading 是合法修饰符；--dark 不是。把主题塞进 BEM 修饰符，等于让每个组件都承担全局上下文职责，结果就是所有 .card--dark、.input--dark 都得重复定义，改个主色要搜遍整个项目。

使用场景：用户点击按钮触发 .button--loading，和当前是深色还是浅色无关 —— 这两个维度必须解耦。

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

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

下载

• .button--primary 只声明“这是主按钮”，不写具体颜色，只用 background-color: var(--btn-bg);
• .button--primary.button--disabled 组合时，--disabled 只控制 opacity 和 pointer-events，不碰颜色变量
• 禁止出现 .button--dark--primary 这类嵌套修饰符，BEM 不支持，构建工具也难校验

多业务品牌换肤需加 --brand-edu 类，但仅用于变量重定义

系统级明暗（data-theme="dark"）和平行业务品牌（data-brand="edu"）是两层独立维度。不能混用，也不能只靠 data-theme 承担品牌职责。

容易踩的坑：写 html[data-theme="edu"] .button--primary { --btn-bg: #0056b3; }，看似可行，但一旦某业务要叠加深色模式（edu-dark），data-theme 值爆炸，选择器权重彻底失控。

• 正确做法：.button--brand-edu { --btn-bg: #0056b3; }，配合 html[data-theme="dark"] .button--brand-edu { --btn-bg: #003d80; }
• --brand-edu 必须加在 Block 级（如 .card--brand-edu），不能加在 Element（如 .card__title--brand-edu）上
• 所有品牌相关变量重定义，必须放在同一份 CSS 文件中，避免加载顺序导致覆盖失效

变量 fallback 和媒体查询必须共存

只靠 JS 切换 data-theme 不够。用户系统偏好是源头，@media (prefers-color-scheme: dark) 必须参与初始变量注入，否则 SSR 首屏白屏、JS 加载失败时样式崩塌。

性能影响：媒体查询定义的变量作用域是 :root，而 JS 设置的 data-theme 是 html 元素，两者不冲突，但 fallback 必须兜底。

• :root { --bg-color: #fff; } 是基础 fallback，不能省
• @media (prefers-color-scheme: dark) { :root { --bg-color: #1a1a1a; } } 提供自动初始值
• html[data-theme="dark"] { --bg-color: #1a1a1a; } 供用户手动覆盖，权重高于媒体查询
• 所有消费点必须带 fallback：background-color: var(--bg-color, #fff);，少一个就可能白屏

真正容易被忽略的是：BEM 修饰符本身不解决主题切换，它只是提供了一个干净的钩子；变量重定义的范围、选择器权重、fallback 缺失、媒体查询与 JS 的协作时机，这些细节才决定主题是否真能稳定落地。

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