2026年了，网站不做暗黑模式等于赶客

上个月看了我们站的数据：晚上8点到12点的访问占比41%，其中移动端占了七成。而我们的网站还是白底黑字，晚上晃眼睛。数据不会骗人——夜间用户在流失。

暗黑模式不是换个背景色

最开始我偷懒，加了个CSS filter: invert(1)。图片全反色了，Logo变成负片效果，丑得不行。后来老老实实写了CSS变量方案。核心就三步：在:root定义一套亮色变量和一套暗色变量、在html上加data-theme属性切换、用localStorage记住用户选择。代码量不到一百行。

几个踩坑点

一是图片。白色背景的PNG在暗黑模式下会很难看，像贴了块狗皮膏药。我的解决方案是给图片加一层半透明深色叠加或者加个浅灰边框。二是表单。input的默认白色背景在暗黑模式特别扎眼，需要单独设background-color。三是第三方组件——如果你用了Google reCAPTCHA，它默认白底，还没法改样式。四是iframe嵌入内容，跨域的你根本控制不了它的配色。

要不要做自动切换

我做了，用prefers-color-scheme媒体查询加一个手动切换按钮。默认跟随系统，用户也能手动改。数据显示大约28%的用户是暗黑模式访问——这个比例比我想象的高。而且暗黑模式用户的平均停留时长比亮色用户多了15%。

实际效果

上了暗黑模式之后，夜间时段的跳出率降了大概6个百分点，平均停留时长多了20多秒。说不上翻天覆地，但做一个暗黑模式用了我一个周末，回报完全对得起投入的时间。建议有条件就上。

标签： 暗黑模式 网页设计 CSS变量 用户体验