最近发生了一件小事让我决定写下这篇文章。
有一天深夜,我已经躺在床上准备睡觉,只是想打开 美的美居 App 把空调关掉。
但当 App 打开的那一瞬间,几乎像打开了一盏白炽灯——在全黑的房间里简直刺眼到不行。
那刻我意识到:我们已经习惯了系统级的暗色模式(Dark Mode),但很多应用还停留在“白天”。
更讽刺的是,我自己的个人网站最初也不支持深色模式,直到后来费了不少力气去适配,才真正感受到那是一种基本的使用礼仪。
于是我开始思考:
暗色模式到底在解决什么问题?为什么人们会越来越依赖它?
本文就从视觉舒适、心理机制、产品体验以及开发实践的角度,尝试分析这个看似“简单”的 UI 设计背后的逻辑。
它其实不是“潮流”,而是人机交互的回归
很多人把暗色模式当成一种“最近流行的 UI 风格”。

但事实上,暗色界面才是人机交互最早期的默认状态——我们后来反而“改用”了亮色风格。
阶段 | 特征说明 |
---|---|
CRT 时代 | 黑底绿字(Terminal、DOS),是最早的人机界面 |
GUI 时代 | 转为白底黑字 ——“像纸一样”,增强可读性 |
移动操作系统早期 | iOS 和 Android 默认都使用亮色界面 |
2018–2019 | macOS/iOS/Android 引入系统级 Dark Mode |
如今 | IDE、AI 工具、技术网站开始默认深色 |
换句话说,暗色模式不是“潮流”,而是我们在数字时代重新找回的一种合理交互方式。
为什么越来越多用户主动切换成暗色模式?
今天,很多人拿到新设备之后的第一件事就是:把系统切成 Dark Mode。
如果我们把这种现象拆解,会发现背后其实是几个维度的共性需求。
维度 | 描述 |
---|---|
视觉舒适 | 深色背景降低光线刺激,减轻眼睛疲劳,尤其在夜间 |
专注力 | 深色能够弱化装饰元素,把注意力集中在内容本身 |
节能效应(OLED) | OLED 黑色像素不发光,暗色主题天生更省电 |
审美趋势 | 深色更极简、更科技感,在技术圈已成为主流风格 |
心理节奏匹配 | 夜间环境下的亮色界面会打破体感节律,暗色更友好 |
某种意义上,暗色模式是一种数字界面对人精神状态的尊重。
两个真实场景:为什么我意识到“它是必需的”
先说我触发写这篇文章的两个真实场景,它们分别来自用户体验和开发者体验,但诠释的是同一件事。
夜晚使用美的美居 App
打开 App 的那一瞬间,整个房间被白色界面照亮。
你只想关一下空调,却感觉被“强行唤醒”,体验非常违和。
这一刻我突然意识到,暗色模式其实是夜间场景下最低限度的交互礼仪。

给我的 Hugo 网站适配暗色模式
早期我自己的网站只有浅色主题,很多人反馈晚上阅读“太亮”。
适配暗色模式时我原以为是“小改动”,结果是一次完整的设计系统重构。
但当真正上线之后,我自己每天使用的感受是“再也回不去亮色了”。
为什么一些 App 至今仍然不支持暗色模式?
很多人会问:既然用户这么需要,那为什么仍然有 App 没有支持(比如美的美居)?
原因其实非常现实——暗色模式在工程上很难作为“外挂想做就做”的功能存在。
原因 | 解释 |
---|---|
没有设计系统 | 早期 UI 写死颜色,后期无法直接切换主题 |
开发成本高 | 需要列一整套新的颜色、图标和状态样式 |
测试矩阵加倍 | 深色 + 亮色意味着两套完整测试流程 |
优先级偏低 | 在功能压力较大的团队中,视觉优化经常被放在很靠后的位置 |
从产品体验角度:它不只是“更好看”,而是“更礼貌”
尤其在夜间场景下,用户处于低光、放松的状态。
如果 App 仍然在大面积白底高亮显示,其实会打断用户的生活节奏。
暗色模式 ≠ 高级功能 暗色模式 = 对用户环境和感受的基本尊重
尤其是家居、睡眠、健康类 App —— 它们大多数的使用场景都发生在“非工作时间”,这时候亮色界面几乎是在“对抗用户”。
开发者角度:适配暗色模式=小设计,大工程
我在改造自己的网站过程中切身感受到了这一点:
适配暗色模式不是“换一套颜色”那么简单,而是一次完整的主题架构重构。
项目 | 实际遇到的问题 |
---|---|
颜色变量 | 重建颜色体系用于 Light/Dark 主题切换 |
图标/图片 | 亮色下可读的图在暗色中可能完全看不到 |
代码块 | 两套高亮主题分别设置 |
系统偏好 | 通过 prefers-color-scheme 响应系统主题 |
主题模板 | 原主题写死颜色,必须重写样式结构 |
典型案例:为什么科技类产品越来越偏爱暗色?
你可能会发现,几乎所有新一代科技工具都在使用暗色作为默认主题,而不是选项。
网站/产品 | 特点 |
---|---|
Vercel 官网 | 默认深色,体现极简与专业感 |
Linear | 深色是品牌识别的一部分,加强专注感 |
Raycast | 深色高对比,展现效率与工具感 |
ChatGPT(Web) | 近版已改为默认深色,亮色成为二级选项 |

总结
- 暗色模式并不仅仅是“更好看”,它具有明确的视觉、心理和体验优势;
- 对于夜间或高专注场景,它实际上是一种基本的交互礼仪;
- 一些应用迟迟未支持暗色,并非意识不到,而是架构不支持、代价太高;
- 对开发者来说,适配暗色模式是一种“长期收益”的投入,一旦做完,整体产品气质会立刻提升;
- 如果说亮色体现的是“信息密度”,那么暗色体现的就是“节奏感和克制感”。