- A+
经过几十年的沉默， dark mode（暗黑模式） 又回到了我们面前，越来越多的 APP 有了暗黑主题，越来月多的操作系统原生添加了 “全局暗黑模式”， 那么一个网站如何跟随系统的脚步， 该用暗黑模式的时候就用暗黑模式显示，该用明亮模式就用明亮主题渲染呢？
我在搜索引擎中检索发现了一篇关于 dark mode 的文章， 其标题是 《Hello darkness, my old friend》， 作者是 Thomas Steiner。
文中介绍了有关于为什么要有 dark mode， 怎样在网页中实现 dark mode 等内容。下面我把我学到的分享出来。
来玩一下
可以修改你的系统明亮/暗黑模式偏好，然后观察这里的文本。
黑夜给了我黑色眼睛，我却用它去寻找光明。
查询
对于查询 Web 浏览器是否支持 ｄａｒｋ ｍｏｄｅ，作者提供了下面的媒体查询代码：
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') { console.log('Dark mode is supported'); } 位一个网站适配 dark mode 模式同样依靠 CSS 媒体查询。
作者的思路是把关于网页 dark mode 与 light mode 差异的代码放到 dark.css 与 light.css 里， 把其他样式放入 style.css 中去，接着在使用外部链接的方式把它们链接进来，对 dark.css 和 light.css 的链接标签添加 media 媒体查询属性。
我也写了一个小demo， 代码如下。
index.html：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>明亮/暗黑模式 Demo</title> <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)"> <link rel="stylesheet" href="/style.css"> <body> <div class="main" role="main"> <p>黑夜给了我黑色眼睛，我却用它去寻找光明。</p> </div> </body> </html> 这里的重点是怎么引入 CSS 样式文件的。
dark.css：
/* dark mode style */ body { color: #999; background-color: #222; } light.css：
/* dark mode style */ body { color: #333; background-color: #DDD; } style.css：
/* style */ .main { margin:50px 80px 20px; } 支持情况
以下操作系统拥有 ｄａｒｋ ｍｏｄｅ 的开关：
-
Windows 10 1809， 1903+
-
Mac OS X 10.14+
-
iOS 13/ iPad OS 13+
-
Android 10+
支持 CSS 媒体查询的浏览器：
-
Chrome/Microsoft Edge（Chromium） 76+
-
FireFox 67+
-
Safari 12.1+（在 Mac OS 上） 货 13+ （在 iOS 与 iPad OS 上）
基本上主流浏览器和操作系统都对 dark mode 做了支持。
后记
最后我们聊一下 dark mode 有什么意义吧。
计算机远古时期因为屏幕技术的限制，迫不得已使用黑底白字的界面。等技术发展了，白底黑字就开始统治了所有的 UI 界面，儿如今 dark mode 又是一种流行。怎么有一些循环的意思呢？
-
对于 OLED 屏幕来说， 深色的界面可以帮助节省电能；
-
帮助人们晚上方便地阅读信息；
-
对某些示例障碍人士很友好。
因为本人是一名视障学生的原因，我身边的低视力同学对深色界面的确是偏爱有加的。 ｄａｒｋ ｍｏｄｅ 这样的设计，既可以让大多数人受益，也可以让小部分人受益，难道这不是最大的意义吗？
正如有人所说：“科技不为多数人，也不为少数人，它属于我们所有人。” 这就是最好的设计吧！
