应使用 :root 定义主题变量并配合 class 切换（如 .dark）控制主题，而非依赖 prefers-color-scheme 媒体查询覆盖 :root；同时设置 color-scheme: light dark 告知浏览器适配原生控件。
怎么用 :root 配合 prefers-color-scheme 自动适配系统主题
浏览器能直接读取系统设置，不需要 JS 就能响应深色/浅色切换——前提是把基础变量定义在 :root 里，并用 @media (prefers-color-scheme: dark) 覆盖。
常见错误是把颜色值硬写在组件选择器里（比如 .btn { background: #333 }），这样媒体查询根本改不动它。
- 所有主题相关颜色、间距、阴影等必须从
:root变量取值，例如--bg-primary: #fff -
@media (prefers-color-scheme: dark)块里只改:root变量，不写具体组件样式 - 移动端 Safari 对
prefers-color-scheme支持较好，但 iOS 13 以下不支持，别依赖它做唯一判断
:root {
--bg-primary: #fff;
--text-primary: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #1a1a1a;
--text-primary: #eee;
}
}
body { background: var(--bg-primary); color: var(--text-primary); }
手动切换时为什么 document.documentElement.classList 比 localStorage 更可靠
用户点按钮切主题，本质是覆盖系统偏好。用 class 切换最轻量、可预测，且不影响伪类（如 :hover）和动画触发。
容易踩的坑是只存 localStorage 却忘了同步到 DOM：页面刷新后变量还在，但 CSS 没生效，因为没重新应用 class。
- 切换时同时操作两件事：
document.documentElement.classList.toggle('dark')和localStorage.setItem('theme', 'dark') - 初始化时优先读
localStorage，再设 class；不要依赖 JS 初始化后再等 CSS 加载完成 - 避免用
style.setProperty()动态改:root，大量变量会卡 UI 线程
color-scheme: light dark 这个 CSS 属性到底有什么用
它不是控制页面颜色，而是告诉浏览器：“我的页面支持深色模式，请把表单控件、滚动条、input 默认样式也按主题渲染”。没有它，即使你写了完美变量，原生控件还是白底黑字。
兼容性要注意：Chrome 85+、Firefox 96+、Safari 13.1+ 支持，旧版本忽略该声明但不影响其他逻辑。
- 加在
:root或html上即可：:root { color-scheme: light dark; } - 它不会触发重绘，也不影响自定义组件，纯属“通知浏览器请配合”
- 如果禁用了系统深色模式但用户手动开了 dark class，这个声明依然有效——浏览器照常渲染深色表单
为什么不要在 CSS 里写 @media (prefers-color-scheme: dark) { :root { ... } } 和手动 class 切换混用
两者叠加会导致变量被多次覆盖，尤其是用户先开系统深色，再点按钮切回浅色，:root 里的值可能还是深色的，因为媒体查询优先级高于普通 class 规则（除非你用 !important，那更糟）。
真实场景下，绝大多数人需要的是「以手动切换为准」，系统偏好只是兜底。
- 删掉所有
@media (prefers-color-scheme: ...)对:root的修改，只保留对原生控件的color-scheme - 把主题变量拆成两套：
.light :root和.dark :root，用 class 控制哪套生效 - 服务端渲染（SSR）场景下，首次 HTML 必须带对应 class，否则会有闪屏——这点常被前端忽略
document.documentElement.style、或在循环里反复调用 getComputedStyle 查变量值，就真会拖慢。主题切换这事，越靠近 DOM 层级越稳。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
