术语图鉴/UI/UX 设计/深色模式
←→切换Esc返回

深色模式 Dark Mode

你可能会说

给网站加个深色模式,按钮、卡片、背景都要适配。

把界面背景换成深色、文字换成浅色的显示模式。

把界面背景换成深色、文字换成浅色的显示模式。减少夜间刺眼,省电(OLED 屏),也更「酷」。

也常被叫作Dark Mode

生活类比

像电影院关灯——内容还是那个内容,但环境暗了看着更舒服、更沉浸。

🎮 动手试试

文章标题
这是一段正文内容,看看深色/浅色模式下的阅读体验差异。
标签A标签B

深色模式不只是「反色」——需要重新调整对比度、阴影、饱和度,让暗色下也舒适。

选择题选择一个你认为最合适的答案

关于「深色模式」,以下哪个描述最准确?

你可以这样告诉 AI

帮我的网站加上深色模式切换,用 CSS 变量管理亮暗两套配色,跟随系统设置自动切换。

容易混淆?这样区分

深色模式 Dark Mode≠
主题切换 Theme Switcher

深色模式只在亮/暗两套间切换,主题切换可以有多套任意配色方案(如圣诞主题、春节主题)。

什么时候用

夜间使用场景多

如果产品用户经常在晚上或暗光环境下使用,深色模式能减少屏幕刺眼、降低眼睛疲劳,同时 OLED 屏还能省电。

和 AI 协作时

想让 AI 加深色模式时,说「用 CSS 变量做亮暗两套配色,跟随系统 prefers-color-scheme 自动切换」,AI 会搭好框架。

什么时候不用

设计资源极度紧张

项目初期只有一个人且需求频繁变动,深色模式需要维护两套配色变量,投入成本高回报延后,可等稳定后再补。

与纯打印报告无关

如果产品输出是 PDF 报表或打印文档,深色模式无意义——打印始终是白底黑字。

组成结构 · Anatomy

1
核心概念Core

把界面背景换成深色、文字换成浅色的显示模式。减少夜间刺眼,省电(OLED 屏),也更「酷」。

2
实际表现In Practice

像电影院关灯——内容还是那个内容,但环境暗了看着更舒服、更沉浸。

3
与 AI 的关联AI Context

和 AI 沟通时提到「加个深色模式切换」,就是让网站支持亮/暗两套配色。

典型使用场景

加暗色模式
告诉 AI「用 CSS 变量做亮暗两套色值,加个切换按钮,默认跟随 prefers-color-scheme」
想弄懂概念时
告诉 AI「用大白话给我解释什么是深色模式,举个生活中的例子」

延伸阅读