必须同时在head中声明并在:root上设置color-scheme: light dark，否则prefers-color-scheme媒体查询和原生控件暗色渲染均不生效。
页面必须显式声明支持暗黑模式，否则浏览器不会启用系统级适配，prefers-color-scheme媒体查询和原生控件样式都不会生效。
怎么写<meta name="color-scheme">才真正起作用
这个 meta 标签不是可选的“增强项”，而是触发浏览器渲染逻辑的关键开关。不加它，<input>、<select></select>、滚动条、焦点环等仍按亮色默认渲染，哪怕 CSS 已写好暗色规则。
-
content值必须是light dark（空格分隔），不能只写dark或auto——后者不被识别 - 必须放在
内，且越早越好；放在 JS 加载后或动态插入无效 - 它不影响你写的 CSS 颜色，只告诉浏览器：“我支持双模式，请按系统偏好调整原生控件”
- 若用 SSR 或静态生成，确保该标签在首屏 HTML 中硬编码，不要靠 JS 注入
color-scheme CSS 属性该挂在哪、怎么写
color-scheme 是 CSS 层面的补充声明，作用粒度比 meta 更细，但不能替代 meta。
- 推荐设在
:root或html上：:root { color-scheme: light dark; }，确保全局生效 - 不要只写
color-scheme: dark——这会强制所有子元素用暗色控件，破坏亮色模式下的可用性 - 个别组件（如弹窗、代码块）可单独设：
.modal { color-scheme: light dark; }，但非常规需求一般不需要 - 它不控制
background或color，只影响浏览器对accent-color、caret-color、滚动条、表单边框等的解析逻辑
为什么prefers-color-scheme匹配失败常被误判为 JS 问题
根本原因往往不是监听没绑好，而是系统级标记缺失或位置错误，导致媒体查询压根不运行。
- 检查 DevTools 的 Rendering 面板是否能成功模拟
prefers-color-scheme: dark；如果模拟后样式无变化，说明 CSS 规则未命中，先排查 meta 和 color-scheme 声明 - Safari 12.1+、Chrome 76+ 才支持该媒体查询，旧 WebView（如微信内置浏览器）直接忽略整块
@media规则，需 fallback 到localStorage检测 -
window.matchMedia('(prefers-color-scheme: dark)')在 DOM 尚未 ready 时调用，matches可能返回false（即使系统是暗色），必须等DOMContentLoaded后再读 - 不要在 iframe 内复用父页的 matchMedia 结果——每个上下文需独立监听
如何验证系统级匹配是否真正就绪
仅看页面颜色变化不够，要确认浏览器底层行为已同步。
- 打开 Chrome DevTools → Rendering 面板 → Emulate CSS media feature → 选
dark，观察地址栏、输入框边框、滚动条是否变暗；若不变，<meta name="color-scheme">一定漏了或写错 - 在暗色系统下打开页面，用
getComputedStyle(document.documentElement).colorScheme查看返回值，应为light dark；若为空或light，说明color-schemeCSS 未生效 - 检查
是否存在——如果 JS 切换主题后该属性没更新，说明 DOM 挂载点错了（必须是document.documentElement，不是body） - OLED 屏用户注意：
background-color: #000在暗色模式下可能过黑，建议用#121212或#1a1a1a替代
最易被忽略的是：meta 标签和 color-scheme CSS 必须同时存在且位置正确，缺一不可。系统级匹配不是“开了开关就能用”，而是浏览器根据这一组标记决定是否启用整套暗色渲染管线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
