深色模式与自定义配色CSS实现方法

本文深入解析了如何用纯 CSS 实现稳健、无闪烁的主题切换功能，重点介绍了原生媒体查询 `prefers-color-scheme` 对系统深色模式的自动响应机制，结合 `:root` 自定义属性统一管理主题色值，并通过 class 控制与 localStorage 持久化实现用户手动切换；同时强调了变量作用域、样式优先级、执行时机等关键细节，帮助开发者避开常见坑点——真正让深色模式既尊重系统偏好，又服从用户意志，且加载流畅、维护可控。

用 prefers-color-scheme 捕获系统级深色偏好

浏览器能自动感知用户系统是否开了深色模式，靠的就是这个媒体查询。它不是 JavaScript 控制的开关，而是 CSS 原生能力，加载快、无闪烁、不依赖 JS 执行。

• 必须写在 CSS 里（或