必须将[data-theme="dark"]写在html上，因为css变量依赖继承，只有锚定根元素才能确保所有后代（含fixed、svg、伪元素）正确继承；权重需高于默认:root声明，避免被覆盖或断链。

直接用 [data-theme] 选择器做换肤，核心不是“加个属性就完事”，而是要让变量覆盖生效、权重压得过默认值、且不被 scoped 或嵌套破坏作用域。

为什么 [data-theme="dark"] 必须写在 html 或 :root 上？

CSS 变量是继承的，但只继承自祖先元素。如果把 [data-theme="dark"] 写在 .app 容器上，那它内部的 .card 能读到变量，但 body、header 这些兄弟节点就读不到——换肤就漏了。

所以必须锚定在根级：

• html[data-theme="dark"] 是最稳妥的选择，确保所有后代都能继承
• :root[data-theme="dark"] 也行，但部分旧版 Safari 对 :root 加属性选择器支持不稳定
• 绝对不要写成 div[data-theme="dark"] 或 .theme-container[data-theme]，会断继承链

[data-theme] 里定义变量，为什么得比 :root 更具体？

浏览器按 CSS 优先级规则匹配变量：哪怕 :root 先声明了 --bg: #fff，只要 html[data-theme="dark"] 的规则权重更高，它的 --bg: #121212 就会生效。

常见翻车点：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 只写了 [data-theme="dark"] { --bg: #121212; } → 没加 html 前缀，权重 ≈ :root，变量不覆盖
• 用了 body[data-theme="dark"] → body 不是根元素，变量无法被 html 下的其他顶层元素（如 dialog）继承
• 在 Vue <style scoped></style> 里写 [data-theme="dark"] → scoped 会加属性选择器，变成 [data-theme="dark"][data-v-xxx]，权重虽高但作用域被锁死，子组件拿不到

怎么让组件样式真正响应 [data-theme] 变化？

组件不能靠自己写死颜色，得统一用 var(--bg)，且 fallback 要合理：

• 正确：background-color: var(--bg, #fff); —— JS 未加载或变量未定义时有兜底
• 错误：background-color: var(--bg); —— 白屏风险，尤其 SSR 或首屏渲染时
• 错误：.button { background: #007bff; } html[data-theme="dark"] .button { background: #333; } —— 回归硬编码，失去变量优势

另外注意：如果组件用了 position: fixed 或 createPortal 渲染到 body 外（比如弹窗），它仍能继承 html 上的变量，无需额外处理。

切换时只改 dataset.theme 就够了吗？

够，但得同步三件事：

• 执行 document.documentElement.dataset.theme = 'dark'（不是 setAttribute，避免类型问题）
• 存进 localStorage，否则刷新丢失：localStorage.setItem('theme', 'dark')
• 页面加载时先读 localStorage，再 fallback 到 prefers-color-scheme，最后才用默认值 —— 否则用户选了暗色，刷新又变亮色

容易忽略的一点：prefers-color-scheme 是异步监听的，首次加载时媒体查询可能还没返回结果，所以初始化逻辑里别等它，先按存储值设，再用 matchMedia 订阅后续变化。

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