@media (prefers-color-scheme) 可原生响应系统深色/浅色偏好，仅需在 CSS 中声明 :root 默认值与 dark 媒体查询覆盖，避免重复定义、硬编码颜色及 JS 混用，确保 SSR 无闪屏且兼容主流现代浏览器。
如何用 @media (prefers-color-scheme) 检测用户系统偏好
浏览器原生支持深色/浅色系统偏好检测，不是靠 JS 读取 localStorage 或手动开关，而是直接响应系统级设置。只要用户在 macOS 设置、Windows 10+ 颜色设置或 iOS 辅助功能里开了深色模式，@media (prefers-color-scheme: dark) 就会生效。
关键点：它只在支持的浏览器中工作（Chrome 76+、Firefox 67+、Safari 12.1+、Edge 79+），IE 完全不支持，别试图给 IE 写回退逻辑——它连这个媒体查询都解析不了。
- 必须写在 CSS 中，不能用 JS 动态插入规则（除非用
CSSStyleSheet.insertRule手动注入，但没必要） -
prefers-color-scheme只有三个可能值：light、dark、no-preference（极少触发，不用专门处理） - 不要和
@supports嵌套来“判断是否支持”，直接写就行；不支持的浏览器会忽略整条@media规则，安全
:root 里定义 CSS 变量时怎么避免重复声明
很多人在 :root 和 @media (prefers-color-scheme: dark) 里各自写一遍所有变量，结果维护两套值，改漏一个就错乱。正确做法是：只在 :root 设默认值（通常是浅色），再用媒体查询「覆盖」深色需要变的部分。
/* 默认是浅色主题 */
:root {
--bg: #fff;
--text: #333;
--border: #e0e0e0;
}
<p>@media (prefers-color-scheme: dark) {<br />
:root {<br />
--bg: #1a1a1a;<br />
--text: #e0e0e0;<br />
--border: #333;<br />
}<br />
}这样变量名统一，组件里只用 background: var(--bg)，无需条件判断。注意：不要在媒体查询里重新声明没变的变量（比如 --primary 如果深浅一致，就别写进去）。
立即学习“前端免费学习笔记（深入）”；
为什么按钮 :hover 在深色模式下看起来没反应
常见原因是 hover 色值写死了，比如 background: #f0f0f0，在深色背景下和背景色差太小，人眼几乎看不出变化。这不是伪类失效，是颜色对比度崩了。
- 所有交互状态色（
:hover、:active、:focus）都要用 CSS 变量，而不是固定十六进制值 - 深色模式下，
:hover的背景通常要比主背景略亮（不是更暗），比如主背景是#1a1a1a，hover 可以是#2d2d2d，否则视觉上“按不下去” - 别依赖 opacity 变化做 hover 效果——深色模式下透明度叠加容易发灰，优先用明度偏移
服务端渲染（SSR）页面首次加载时的闪屏问题
纯 CSS 的 @media (prefers-color-scheme) 在 SSR 页面里不会导致闪屏，因为样式是同步注入的。但如果你用 JS 检测 window.matchMedia 然后动态加 class（比如 <body class="dark">），就会出现白屏→闪黑→稳定的过程。
真正要防的是「JS 驱动的主题切换」和「CSS 媒体查询混用」：比如页面用媒体查询设了 --bg，又用 JS 给 body 加 data-theme="dark" 并覆盖同一变量，两者不同步就出问题。
- 选一种方案到底：纯 CSS 媒体查询，或纯 JS 控制（含 localStorage 同步），别交叉
- 如果必须 JS 控制（比如加手动切换开关），首次渲染时用
matchMedia同步初始化，别等 DOM 加载完再查 - Next.js / Nuxt 等框架的服务端需传入
req.headers['sec-ch-prefers-color-scheme']（仅 Chromium 系支持，不可靠），所以 SSR 场景仍应以客户端媒体查询为准
最稳的路就是只用 CSS 媒体查询，把逻辑交给浏览器。复杂点在于有些设计系统要求「用户手动覆盖系统偏好」，这时候就得自己管状态同步，而不是指望伪类自动兜底。
