CSS实现深浅色模式切换方法

本文深入解析了如何利用 CSS 原生媒体查询 `@media (prefers-color-scheme)` 高效、可靠地实现深色/浅色模式切换——无需 JavaScript 干预、避免重复变量定义、杜绝 SSR 闪屏，并兼顾可维护性与跨浏览器兼容性；它教你用最少的代码（仅需在 `:root` 设默认值 + `dark` 媒体查询覆盖关键变量）统一管理主题色，同时提醒你避开常见陷阱：如硬编码交互状态色导致 hover 失效、混用 JS 主题逻辑引发样式冲突、为不支持浏览器强行回退等，真正让深浅色模式成为轻量、健壮、开箱即用的 CSS 能力。

如何用 @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>
}</p>

这样变量名统一，组件里只用 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（比如 ），就会出现白屏→闪黑→稳定的过程。

真正要防的是「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 媒体查询，把逻辑交给浏览器。复杂点在于有些设计系统要求「用户手动覆盖系统偏好」，这时候就得自己管状态同步，而不是指望伪类自动兜底。

理论要掌握，实操不能落！以上关于《CSS实现深浅色模式切换方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！