@media (prefers-color-scheme: dark) 需配合默认样式、CSS变量、color-scheme声明及JS监听机制才能可靠生效，否则易因兜底缺失、环境限制或逻辑错位导致失效。
@media (prefers-color-scheme: dark) 就是标准写法，但只写它大概率会“失效”——不是语法错，而是漏了兜底、环境不支持或没处理手动切换逻辑。
为什么@media (prefers-color-scheme: dark) 看似写了却没反应
常见现象是：系统已开深色模式，CSS 里也写了该媒体查询，但页面还是亮色。根本原因往往不是浏览器不支持，而是：
- 只写了
@media (prefers-color-scheme: dark)，没写默认亮色样式（比如body { background: white; color: black; }），导致暗色下未覆盖的元素沿用浏览器默认值，可能黑字配黑底 - 用
file://协议直接双击打开 HTML 文件 → Safari 会禁用该查询，Chrome 可能降级；必须起本地服务（如python3 -m http.server）再测 - CSS 文件加载失败、有语法错误，或被
@import放在后面（@media写在@import后会失效） - 系统设置路径不对：macOS 是「系统设置 → 外观」，Windows 是「设置 → 个性化 → 颜色 → 默认应用模式」，不是浏览器自带的“深色主题”开关
怎么安全地用 CSS 变量配合 prefers-color-scheme
硬写两套重复样式维护成本高，且容易漏改。推荐用 CSS 自定义属性统一收口：
- 所有颜色、背景、边框等易受亮度影响的属性，都从
:root定义的变量读取，例如--color-bg: #ffffff;和--color-text: #333333; - 在
:root下先写亮色默认值，再用@media (prefers-color-scheme: dark)覆盖这些变量，不要在媒体查询里重写具体选择器 - 务必加上
color-scheme: light dark;到:root或html，否则原生表单控件（input、checkbox）仍按亮色渲染 - 避免用
#121212这类硬编码色值，优先用Canvas、CanvasText等系统语义化关键词，它们随系统主题自动变化且适配高对比度模式
如何让 JS 正确读取并监听系统 Dark Mode 变更
如果需要在 JS 中响应或初始化主题，不能靠 document.body.classList 或一次性判断，得用标准 API：
立即学习“前端免费学习笔记（深入）”；
- 初始化判断用
window.matchMedia('(prefers-color-scheme: dark)').matches，返回布尔值；别拼错成prefers-dark-mode或漏括号 - 监听系统切换必须显式调用
.addEventListener('change', handler)；onchange不生效 - Safari 14+、Chrome 85+、Firefox 96+ 才稳定支持
change事件；旧版只能轮询或 reload - 别在页面加载完成（
DOMContentLoaded）后才查 —— 此时首屏可能已按错误主题渲染过一帧；应把判断逻辑放进<head>的内联<script>
手动切换按钮和系统偏好共存时最容易踩的坑
用户点了“切暗黑”，但系统是亮色，刷新后又变回来——这是最典型的失控场景。核心问题在于：prefers-color-scheme 是只读信号，不是可写状态。
- 一旦加了手动开关，就必须引入
data-theme属性（如<html data-theme="dark">），并用 CSS 优先级压制媒体查询结果 - 每次切换后必须同步写入
localStorage.setItem("theme", "dark")，否则刷新即丢失 - 初始判断顺序很重要：优先读
localStorage.getItem("theme")，为null时再 fallback 到window.matchMedia结果；别让data-theme="null"出现在 DOM 上 - 如果项目已用组件库（如 Chakra UI）的
dark:前缀或theme-darkclass 控制主题，就别混用prefers-color-scheme媒体查询，统一入口，否则样式权重打架
真正麻烦的从来不是“怎么写媒体查询”，而是怎么让系统偏好、用户意图、持久化存储、首屏渲染这四者对齐——稍有错位，就会闪屏、错色、或切换后立即失效。
