怎么用CSS媒体查询检测用户系统的Dark Mode暗黑模式？-css教程-PHP中文网

@media (prefers-color-scheme: dark) 需配合默认样式、css变量、color-scheme声明及js监听机制才能可靠生效，否则易因兜底缺失、环境限制或逻辑错位导致失效。

怎么用css媒体查询检测用户系统的dark mode暗黑模式？

@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 自定义属性统一收口：

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 中响应或初始化主题，不能靠 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）后才查 —— 此时首屏可能已按错误主题渲染过一帧；应把判断逻辑放进的内联 <script></script>

用户点了“切暗黑”，但系统是亮色，刷新后又变回来——这是最典型的失控场景。核心问题在于：prefers-color-scheme 是只读信号，不是可写状态。

一旦加了手动开关，就必须引入 data-theme 属性（如），并用 CSS 优先级压制媒体查询结果
每次切换后必须同步写入 localStorage.setItem("theme", "dark")，否则刷新即丢失
初始判断顺序很重要：优先读 localStorage.getItem("theme")，为 null 时再 fallback 到 window.matchMedia 结果；别让 data-theme="null" 出现在 DOM 上
如果项目已用组件库（如 Chakra UI）的 dark: 前缀或 theme-dark class 控制主题，就别混用 prefers-color-scheme 媒体查询，统一入口，否则样式权重打架