你半夜刷网站时眯过眼睛吗？别让白屏赶走用户

昨晚改稿到一点，打开一个常用工具网站查资料，页面一亮，我下意识抬手挡了下——不是夸张，真像被手电筒照了眼。更尴尬的是，这网站还是我司合作方做的。暗黑模式早不是“高级功能”，而是深夜用户的呼吸面罩。没它，很多人撑不过三秒就会关掉页面。

暗黑模式真的有用？看真实场景怎么说

先说个实在的：去年帮一家知识付费平台加暗黑模式，上线后深夜11点到凌晨2点的用户，平均多看了两屏内容。后台评论里，“终于不用开手机护眼模式凑合看了”这种话刷了一屏。道理很直白——人在暗环境里，白底黑字就像盯着灯泡看，瞳孔缩、泪液少、眼球转得慢。暗色背景把屏幕整体亮度压下来，眼睛才真正松了口气。

再举个电商的例子：某母婴社区上线暗黑模式后，夜间发布的辅食教程帖，收藏率明显提升。用户留言说：“睡前躺着翻不刺眼，顺手就存了。”你看，人不是在“用网站”，是在“用自己最放松的状态”用网站。你给不给这个状态，决定了他愿不愿意多留一会儿。

实现暗黑模式的3个方法：从能用到好用

方法一：CSS媒体查询，五分钟搭出基础版

用 prefers-color-scheme 这个原生能力，浏览器自动读取系统设置。加几行代码就行：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
}

好处是零配置、零兼容问题。缺点也很实在：用户不能自己切。适合博客、文档站这类以阅读为主的站点。如果你的用户常在白天也想用深色（比如设计师盯屏久），那就得往下看了。

方法二：JavaScript手动切换，让用户说了算

在方法一基础上，加个开关按钮。点击时给 <html> 标签加个 data-theme="dark" 属性，再写对应CSS规则覆盖默认样式。

重点来了：一定要把用户选择存在 localStorage 里。不然刷新一下又打回原形——这种“假适配”比不做好不了多少。我见过太多按钮设计得很酷，但一按完刷新就失效，用户心里OS：“哦，又是个样子货。”

方法三：CSS自定义属性，大项目省心方案

如果你的网站用了大量颜色变量（比如 --color-bg, --color-text, --color-border），直接上CSS自定义属性。所有颜色都从变量里取，暗黑模式下只重设变量值：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

改一处，全站响应。尤其适合用Vue/React组件化开发的项目，维护起来不头疼。

暗黑模式适配的5个坑，我替你踩过了

坑1：图片和图标变“贴纸”

白底图放深灰背景上，边缘硬得像PS没羽化。别硬扛，给图片加 box-shadow: 0 0 8px rgba(0,0,0,0.3) 或者用 mix-blend-mode: multiply 让它自然融进去。图标优先用SVG，填色写成 fill: currentColor，自动随文字色变。

坑2：对比度不是越强越好

纯黑 #000000 + 纯白 #FFFFFF 看着爽，实际盯着看十分钟就累。推荐组合：背景用 #121212（带灰度的深色），文字用 #e0e0e0（不是死白，带点暖灰）。这是多数主流App验证过的舒适区间。

坑3：链接和按钮突然“隐身”

亮色模式下的蓝色链接 #1976D2，往深灰背景上一放，直接糊成一片。换种思路：用青绿系高饱和色，比如 #29B6F6 或 #66BB6A，既保持可识别性，又不刺眼。

坑4：滚动条和输入框还在“演亮色”

改完主体色，结果一拉滚动条——白色滑块在黑背景上晃眼；点进搜索框——浅灰边框像没画完。别漏掉这些：::-webkit-scrollbar-thumb, input:focus, textarea, select 全部单独写一遍暗色样式。

坑5：系统偏好和手动切换打架

用户系统开着暗黑，但你在网站上点了“切回亮色”。如果代码没处理优先级，下次刷新又弹回去。正确逻辑：手动切换 > 系统偏好；且把选择存在 localStorage，关了浏览器再开也不丢。

暗黑模式对SEO有影响吗？放心做

Googlebot抓页面，不运行JS，也不管你开了什么主题。它只读HTML里的文字、标题、<meta> 和结构。只要你的内容没被 display: none 隐藏，或者没用JS动态删掉关键文本，SEO就不会掉链子。

反而有个隐藏好处：用户停留更久、翻页更多、跳出更少——这些行为信号会被搜索引擎捕捉到。它不会说“你用了暗黑模式”，但它会感知：“这站让人愿意多待会儿。”

今天就能执行的1个操作步骤

打开你正在用的网站管理后台（比如WordPress后台、Vercel项目控制台，或本地代码编辑器），找到主CSS文件，在末尾粘贴这段：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
  a {
    color: #29B6F6;
  }
}

保存，刷新页面（记得先在系统设置里打开暗黑模式）。看到变化了吗？哪怕只是基础版，也比没有强。接下来，对照上面5个坑，挑一个你最常被用户吐槽的点，今晚就修掉。