必须将data-theme属性设在根元素上，以确保CSS变量继承生效、伪元素及第三方库主题正确响应；错误设在子容器会导致断链、闪动或失效。
属性选择器怎么选中换肤状态元素
换肤不是靠 class 切换，而是靠自定义属性（如 data-theme="dark"）标记主题状态，这样更语义、更易被 JS 控制，也避免 class 名冲突。媒体查询本身不改变 DOM，所以必须用属性选择器匹配这个状态，再结合断点做差异化渲染。
常见错误现象：[data-theme="dark"] { color: #fff; } 写了但没生效——可能是因为 HTML 根节点没加 data-theme 属性，或 JS 没在页面加载后正确设置；也可能误用了 theme 而非 data-theme，浏览器只认带 data- 前缀的自定义属性。
-
data-theme必须写在或上，才能让后代选择器继承作用域 - 不要用
theme="dark"这种非法属性，CSS 不会匹配 - 多个主题可共存：比如
data-theme="dark" data-mode="mobile"，后续可组合使用
媒体查询里怎么嵌套属性选择器
属性选择器和媒体查询没有语法冲突，直接并列写就行，但要注意层级和作用范围。重点不是“能不能嵌”，而是“写在哪一级才真正生效”。
典型场景：深色模式下，小屏设备要降低按钮阴影强度，桌面端则保留完整投影。这时不能只写 @media (max-width: 768px) { [data-theme="dark"] .btn { box-shadow: none; } }，而应确保 .btn 确实是 [data-theme="dark"] 的后代，否则样式不触发。
- 推荐把
data-theme放在上，然后所有主题相关样式都用html[data-theme="dark"]开头，避免遗漏 - 不要在媒体查询里重复声明全局主题变量，比如
[data-theme="dark"] { --bg: #121212; }应写在顶层，媒体查询里只覆盖布局/尺寸类属性 - 慎用
!important强行覆盖，容易导致大屏深色模式下字体颜色错乱
移动端换肤为什么常出现闪屏或延迟
根本原因不是 CSS 慢，而是 JS 设置 data-theme 的时机晚于首次渲染。用户看到的是默认主题（通常是亮色），等 JS 执行完才切到深色，尤其在低端安卓机上明显。
解决办法不是优化 CSS，而是提前注入主题状态：
- 服务端渲染（SSR）时根据 UA 或用户偏好头（
Sec-CH-Prefers-Color-Scheme）直接输出带data-theme的 HTML - 客户端 fallback：用
window.matchMedia('(prefers-color-scheme: dark)')在内联脚本中立即判断并写入属性，比 DOMContentLoaded 更早 - 避免在
DOMContentLoaded之后才操作document.documentElement.dataset.theme
怎样让暗黑模式适配高对比度系统设置
仅靠 data-theme="dark" 不足以覆盖系统级无障碍需求。Windows 高对比度模式、macOS 的“增加对比度”开关，会绕过 CSS 主题逻辑，直接强制重绘。这时候得用 @media (forced-colors: active) 这类现代媒体查询兜底。
它和 prefers-color-scheme 是正交关系：前者是系统强制干预，后者是用户偏好。两者可能同时存在，比如用户开了深色模式 + 高对比度。
-
@media (forced-colors: active) and (prefers-color-scheme: dark)可以精准命中“深色+高对比”组合 - 此时应禁用所有背景图、渐变、阴影，改用系统提供的
CanvasText、ButtonFace等语义色 - 属性选择器仍有效：
html[data-theme="dark"] @media (forced-colors: active) { --bg: Canvas; }，但注意 CSSOM 中@media不能嵌在规则块内，必须外层包裹
实际项目中最容易被忽略的，是主题切换后表单控件（如 、）的颜色不会自动跟随 data-theme 变化——它们受操作系统原生样式控制，必须用 appearance: none + 自定义绘制，且该绘制逻辑也要在对应媒体查询中重新声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
