纯@media(prefers-color-scheme:dark)会闪屏因变量未定义或覆盖错序，必须配合:root默认变量、data-theme属性、localstorage及change事件监听才能真正可用。
直接用 @media (prefers-color-scheme: dark) 就能自动响应系统设置，但仅靠它无法避免首次渲染闪屏、不支持手动切换、在旧 WebView 里完全失效——必须配合 :root 变量定义顺序 + data-theme 属性 + localStorage 才算真正可用。
为什么纯 @media (prefers-color-scheme: dark) 会闪屏或白屏
根本原因是变量未定义或样式覆盖错序。浏览器加载 CSS 时，如果只在媒体查询里定义 --bg，而系统是亮色模式，那 var(--bg) 就是 initial（透明/无效），background-color: var(--bg) 等价于 background-color: transparent，body 就可能透出白底或变空。
-
:root必须先写默认亮色变量：--bg: #ffffff、--text: #333333 -
@media (prefers-color-scheme: dark)里只做覆盖，不重定义整套样式 - 所有颜色相关属性（
background-color、color、border-color、box-shadow、fill）都必须用var(--bg)，禁用硬编码值 - 别在组件内部（如
.card { --bg: #1e1e1e; }）重复定义主题变量，媒体查询无法穿透作用域
data-theme="dark" 为什么必须挂在
挂错位置会导致部分区域不生效，比如 <pre class="brush:php;toolbar:false;"></pre>、<textarea></textarea>、滚动条、SVG 图标、焦点 outline —— 这些元素的样式常依赖根级继承或伪元素， 上的 class 或 data 属性无法可靠影响它们。
- JS 设置必须操作
document.documentElement.dataset.theme = "dark"，不是body或其他节点 - CSS 选择器必须带
html前缀：html[data-theme="dark"] { --bg: #1a1a1a; }，否则易被第三方库或内联样式覆盖 - 初始化时，
localStorage.getItem("theme")返回null不能直接赋给dataset.theme（否则变成data-theme="null"，CSS 不匹配） - 需 fallback 到
window.matchMedia("(prefers-color-scheme: dark)").matches，且该调用应在 DOM ready 后执行
怎么让系统切换实时生效，而不是等刷新
prefers-color-scheme 媒体查询本身是静态的，但现代浏览器（Chrome 87+、Firefox 96+、Safari 14+）支持 change 事件监听，前提是手动绑定，否则系统切了主题，页面毫无反应。
- 监听代码必须写：
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { ... }) - 回调里要同步更新
document.documentElement.dataset.theme和localStorage - 旧版 Safari（12.1–13.x）或微信内置 WebView 不支持
change事件，只能靠刷新或轮询（不推荐） - 别漏掉
no-preference场景（极少见），但逻辑上应归入亮色 fallback
表单、SVG、阴影这些“边缘元素”怎么统一处理
@media (prefers-color-scheme: dark) 不会自动翻转原生控件外观，也不会改变 SVG 的 fill 或 stroke，更不会调整 box-shadow 深度——全得手动声明。
-
<input type="range">轨道、滑块需单独用::-webkit-slider-runnable-track和::-webkit-slider-thumb -
<select></select>下拉箭头、<textarea></textarea>滚动条要用::-webkit-scrollbar等伪类重写 - 所有
<svg></svg>应设fill="currentColor"并依赖color继承，或用fill: var(--icon)配合变量 -
box-shadow别写死0 2px 4px rgba(0,0,0,0.1)，改用var(--shadow)，暗色下设为0 2px 4px rgba(0,0,0,0.3) - OLED 屏幕建议避免纯黑
#000000，用#0f0f0f或#121212减少烧屏风险
最容易被忽略的是：系统偏好只是默认值，用户点击切换按钮后的选择必须优先；而这个“优先”不是靠 JS 覆盖样式，是靠把 data-theme 值塞进 并让所有主题 CSS 都基于它编写——媒体查询只管兜底，不参与控制流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
