企业官网建设流程全解析

凌晨三点，用户的一句“亮瞎了”

2020年，我维护一个开源文档站点。有一天收到一个 Issue，标题只有一句话：

“大晚上看你们的文档，背景白得像医院手术室，能不能加个深色模式？”

下面跟帖一片 +1。我看了看时间——凌晨 2 点 47 分，而那个用户所在地是 UTC+8，显然他也是在深夜写代码，然后被自己的文档亮到睡不着。

那一刻我意识到，深色模式不是“花里胡哨”的噱头，而是一个实实在在的可访问性需求。对于长时间在暗光环境下工作的开发者、设计师、夜猫子用户来说，一个友善的深色主题就是护眼神器。

于是我开始了调研。那时（2020 年初）深色模式的实现方案主要有三种：

1. 纯媒体查询：prefers-color-scheme，跟着系统走，用户没得选。
2. 类切换：在根元素上加.dark类，配合 CSS 变量，用户手动点按钮。
3. 脚本控制：JS 动态覆盖每个元素的颜色值，最灵活但也最麻烦。

后来几年里，我在这三个方案上都踩过坑、翻过车、优化过。到今天（2026 年），深色模式已经成为很多网站的标配，甚至 WCAG 指南都建议提供高对比度或深色主题作为替代方案。

这篇文章，我想把三种方案的原理、代码、优缺点、组合策略一次性写清楚。不管你是个人博客作者，还是企业级设计系统的维护者，都能找到适合你的那条路。