深色模式

概要

深色模式，是把应用或网站的配色切换为“深色背景配浅色文字”的显示设置。以往的“浅色背景配深色文字”叫作浅色模式。iOS、Android、Windows、macOS 都支持系统级的深色模式。

深色模式的好处

深色模式的好处之一，是在昏暗环境下减轻眼睛的负担。夜间使用智能手机时，白色背景会让人觉得刺眼。切换到深色模式后，整个画面的亮度下降，对眼睛的刺激也会缓和。

在搭载有机 EL（OLED）显示屏的设备上，还有减少耗电的效果。OLED 会把黑色像素的发光完全关掉，所以画面的暗部越多，耗电越少。液晶（LCD）显示屏的背光一直亮着，所以得不到这个效果。

在网站上实现深色模式

要在网站上实现深色模式，就使用 CSS 的媒体查询 @media，以 “prefers-color-scheme: dark” 为条件。这个媒体查询会在用户通过操作系统或浏览器的设置选择了深色配色时生效。在 Tailwind CSS 中，用 “dark:” 前缀就能简洁地写出深色模式用的样式。

实现上需要注意，只是把背景设为黑色、文字设为白色是不够的。有一种做法是，背景不用纯黑（#000）而用深灰（#1a1a1a 左右），文字也不用纯白（#fff）而用米白（#e5e5e5 左右）。图片和图标在深色模式下是否显得不协调，也需要确认。

深色模式和无障碍

从无障碍的角度看，深色模式也很重要。对光敏感的用户来说，明亮的画面有时会引起头痛或眼痛。提供深色模式，是为了让这些用户能舒适地使用服务而做的考虑。

不过，深色模式并不适合所有人。有散光的用户，有时会觉得深色背景上的浅色文字难以阅读。重要的是让用户能根据自己的喜好和情况选择模式，而不是强制使用其中一种。