2026年网页暗黑模式设计要注意的4个坑

上个月给一个SaaS产品做暗黑模式适配，踩了几个坑，记录一下。暗黑模式不是简单地把背景色改成黑的、文字改成白的，这么干出来的效果会很刺眼。

第一个坑：纯黑背景。很多人直接把背景设成#000000，文字设成#FFFFFF。这个对比度太高，看久了眼睛累。正确做法是用深灰色，比如#121212或#1a1a1a。Google Material Design推荐用#121212作为最底层背景，上一层用轻微的灰色叠加来区分层级。

第二个坑：文字颜色。白色文字在深色背景上会有「光晕效应」，看起来比实际粗。所以暗黑模式下的正文字重应该比浅色模式轻一档——浅色用400，暗黑用300甚至200。而且纯白#FFFFFF太刺眼，用#E0E0E0或#CCCCCC更舒服。我在项目里用的是#B3B3B3作为正文色，#FFFFFF作为标题色，用户反馈说长时间阅读不累。

第三个坑：品牌色不变。浅色模式下的蓝色按钮在暗黑模式下会显得特别亮、特别跳。我的做法是把品牌主色调饱和度降低10-15%。比如原来的#2563EB降到#4F7DE8，视觉上舒服很多。但要注意——红色和绿色的饱和度在暗黑模式下反而可以保持，因为它们在暗背景上识别度刚好。

第四个坑：图片和图标。白色背景的截图、logo、插图在暗黑模式下像一块补丁。最简单的处理方式是给img加个细微的白色边框（border: 1px solid rgba(255,255,255,0.1)），或者用CSS filter降低亮度。SVG图标如果用的是currentColor会自动适配，但如果是固定fill的颜色，就得手动换成暗黑版的。

CSS实现上，2026年推荐用prefers-color-scheme媒体查询加上CSS自定义属性，不要写两套CSS——维护成本差太多了。一个干净的做法是：

:root定义浅色变量，@media (prefers-color-scheme: dark)里覆盖深色变量，所有组件用var()引用。切换模式时不需要改任何组件代码。

最后说一个数据：我们适配暗黑模式后，夜间时段（晚上10点到凌晨2点）的页面停留时间增加了18%。不是因为功能变好了，纯粹是看着不累。对于内容型网站来说，暗黑模式不是花活，是用户需求。

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