给目录站加深色模式：真正麻烦的不是配色，是那六处细节

先说清楚一件事：深色模式和排名没有任何关系。没有任何官方文档说支持深色模式的页面会排得更前。做它的理由是产品侧的——晚上刷站的人眼睛舒服，OLED 屏幕省一点电，以及一部分用户就是喜欢。

图片来源：网络，版权归原作者所有，侵权请联系删除

实现：两行够了，别上 JS

核心是 CSS 的 prefers-color-scheme 媒体查询，配合一个 <meta name="color-scheme" content="light dark">。

那行 meta 很多人不知道加。它的作用是告诉浏览器这个页面支持深色，浏览器就会把表单控件、滚动条、下拉框这些默认 UI 也跟着切成深色。不加的话会出现一种很尴尬的状态：页面背景黑了，但输入框还是白的，滚动条还是浅色的。

不要用 JS 在页面加载后再判断和切换。那样会出现一瞬间的白底闪烁（FOUC），在夜间环境下这一下闪得挺难受。纯 CSS 方案在首屏渲染时就已经确定了，没有这个问题。

六个容易翻车的细节

一，别用纯黑配纯白。#000 背景配 #FFF 文字的对比度高达 21:1，看着刺眼，长时间读会累。Material Design 那套推荐值是背景 #121212 左右、主文字 #E8EAED 左右，实际观感好很多。

二，缩略图和截图是白的。目录站到处都是站点截图和 favicon，这些图是浅底上做的，放到深色背景上会出现一块块白斑。处理办法是给图片容器一个浅色底（#F1F3F4）加一点内边距，让它看起来像一张卡片，而不是浮在黑色上的一块白。favicon 的话，拿不到深色版本就走这个方案。

三，只改背景不改边框。改了 background 忘了 border-color，结果卡片边界消失，整个页面糊成一片。改深色模式时要把边框、分隔线、阴影一起过一遍。深色下的阴影几乎看不见，通常要换成更亮的边框来分隔。

四，对比度照样要过 4.5:1。深色模式下人们容易放松这条。浅色下好看的 #666 灰字，到了深色背景上经常掉到 3:1 以下。所有正文颜色要重新算一遍对比度，别凭眼睛看。

五，logo 和 favicon 要有深色版本。深色 logo 在深色背景上等于隐形。至少准备一版浅色的，用 <picture> 配合媒体查询切换，或者直接把 logo 放在一个有底色的容器里。

六，链接颜色要重选。浅色下习惯用的蓝色在深底上会偏暗，反过来浅蓝在深底上又太跳。通常要提亮一档，同时保证和正文色区分得开——别忘了 WCAG 1.4.1：不能只靠颜色区分链接，下划线该留就留。

一条必须守住的线

别把任何内容只放在深色分支里。意思是不要出现这种写法：浅色模式下显示完整描述，深色模式下某段内容被 display:none 掉或者换成了别的东西。这类差异会被当成隐藏文本处理，性质和无障碍无关，是垃圾政策层面的风险。

还有个更实际的问题：抓取工具渲染页面时，通常走的是默认偏好，也就是浅色。如果某个关键信息你只写在深色分支的 DOM 里，爬虫看到的就是缺失的。规则很简单：两个模式的 DOM 结构必须完全一致，只有 CSS 不一样。

切换开关要不要给用户

给。只跟随系统设置的话，用户系统开着深色但就想看浅色，就没办法了。做法是在页面上放一个三态切换（跟随系统 / 浅色 / 深色），存到 localStorage，加载时用一小段内联脚本把类名写到 <html> 上，避免闪烁。

这段脚本要内联在 <head> 里，不能放在外部 JS 里等加载——外部文件加载完再切换，闪烁就回来了。这是唯一一处我建议用 JS 的地方，因为用户显式选择必须优先于系统偏好。

做完这些，深色模式大概两三天工作量。收益不体现在排名上，但体现在回访上——我站上开深色之后，夜间时段（22 点到凌晨 2 点）的会话时长涨了两成多。这个数字比任何排名变化都实在。