使用 @media (prefers-color-scheme: dark) 媒体查询可原生检测系统深色偏好，需配合 CSS 变量统一管理主题色，并显式重置图标、表单、阴影等易忽略元素样式，避免仅改背景导致视觉缺陷。
怎么用 prefers-color-scheme 检测系统深色偏好
浏览器原生支持深色模式检测，关键就是 CSS 媒体查询 @media (prefers-color-scheme: dark)。它不依赖 JavaScript，也不需要用户手动切换开关，直接读取操作系统或浏览器设置。
注意：这个媒体查询只在支持该特性的环境生效（Chrome 76+、Firefox 67+、Safari 12.1+），旧版 Safari 可能返回 no-preference，不能当 light 处理。
- 不要写成
@media (prefers-color-scheme = dark)—— 等号是错的，必须用冒号 - 如果页面已有全局
body { background: white }，仅靠媒体查询改背景色可能被内联样式或更高优先级规则覆盖 - 推荐把基础样式设为浅色，再用
@media覆盖深色部分，避免反向逻辑导致漏样式
如何让 HTML 元素响应深色模式切换
最稳妥的方式是给 <html> 或 <body> 加一个 class，再配合 CSS 规则批量控制。比如：
html {
--bg-color: #fff;
--text-color: #000;
}
@media (prefers-color-scheme: dark) {
html {
--bg-color: #1a1a1a;
--text-color: #e6e6e6;
}
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
这样既保留 CSS 变量的灵活性，又避免重复写几十条 color/background 规则。
立即学习“前端免费学习笔记（深入）”；
- 别直接在
<body>上写style="background: #1a1a1a"—— 这会覆盖媒体查询里的声明 - 图标、按钮边框、表单控件（如
<input>）默认样式也受深色模式影响，需显式重置，否则可能在深色背景下看不见 - 图片和 SVG 如果用了纯黑/纯白，要考虑加
filter: brightness(0.85)或换源，否则对比度过高刺眼
要不要加 JS 手动切换开关
加是可以加，但得清楚代价：一旦用户手动点开关，就覆盖了系统偏好，后续还得存到 localStorage 并同步到 CSS 变量，否则刷新就失效。
典型流程是：读 localStorage → 设置 data-theme="dark" → 用 JS 注入对应 class → 再监听系统变化做 fallback。
- 如果只用 JS 切换，没配
@media回退逻辑，系统切深色时页面不会自动响应 -
matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)是监听系统变更的正确方式，不是轮询 - 深色开关图标建议用 SVG 而非 PNG，方便用
fill动态改颜色，避免多图管理
深色模式下容易被忽略的细节
很多团队只改了背景和文字，结果表格斑马纹看不清、代码块语法高亮发灰、<hr> 线消失、disabled 的按钮完全隐形——这些都不是“没切成功”，而是没覆盖全。
-
textarea和input[type="text"]的::placeholder在深色下默认是浅灰，要单独设color: #888 - 使用
box-shadow时，深色背景上阴影容易糊成一团，建议调低blur值或改用inset - 第三方组件库（如 Bootstrap、Tailwind）自带的深色类名（如
dark:bg-gray-800）必须配合class="dark:..."和data-theme="dark"才生效，不能只靠媒体查询
深色模式不是换个背景色就完事，它是整套视觉层级的重新校准。最麻烦的从来不是“怎么开”，而是“哪些地方没关”。
