深色模式配色:不是简单反色

沫沫
沫沫
发布于 2026-09-06

深色模式配色:不是简单反色

把白底黑字直接翻转,得到的深色模式往往刺眼且难读。

降饱和、提亮度

浅色模式下的品牌色,在深色下要降低饱和度:

CSS
:root { --primary: #2563eb; }
.kun-dark-mode { --primary: #60a5fa; }

用"提亮"表达层级

深色模式里越"高"的表面越亮,和浅色模式正好相反:

  • 背景 #0a0a0a
  • 卡片 #171717
  • 弹层 #262626

正文用 #e5e5e5 而不是纯白,长时间阅读更舒适。

配色完成后用真实页面全屏看十分钟,比在取色器里调半小时都有用。