技术
暗色不是审美,是注意力管理
2 分钟
很多人把暗色模式当风格选项。其实它是一种光预算的重新分配。
#亮色的逻辑:纸
亮色界面模拟纸。纸是被照亮的,所以整个页面在发光,文字是"挖掉"的暗部。你的视觉系统面对的是一整面光墙。
优点是符合几百年的阅读习惯,适合长文、适合白天、适合打印。
#暗色的逻辑:舞台
暗色界面模拟舞台。背景不发光,只有需要被看见的东西发光。这意味着每一处亮,都是一次明确的引导。
这就是为什么暗色界面一旦滥用高亮色,就会瞬间变得廉价——舞台上同时打十盏追光,等于没有追光。
#三条我坚持的规则
1. 不用纯黑,不用纯白
#000 上的 #fff 对比度过高,长时间看会有光晕(halation),尤其对散光人群。我用 #08080b 配 #f4f1ea——一点点暖,像旧纸和墨。
2. 层级用透明度,不用色值
--card: rgba(244, 241, 234, 0.035);
--line: rgba(244, 241, 234, 0.14);
用主文字色的低透明度做卡片和分割线,切换主题时只改两个变量,整套层级自动成立。
3. 强调色只给一种
整站只有一个 --acc(这里是余烬橙 #ff4a17)。它出现在:当前状态、链接、悬停反馈。别的地方一律灰阶。
一个颜色如果到处都是,它就不再是强调色,只是背景色。
#什么时候该用亮色
- 内容以长文本阅读为主,且用户多在白天使用
- 需要打印或导出
- 数据密集型表格(暗色下网格线很难做得干净)
所以我给这个站留了切换按钮——右上角那个。切过去你会发现,流体的颜色也跟着变了,因为它读的是同一套变量。