网页跟随系统 dark mode （暗黑模式）的实现

经过几十年的沉默， dark mode（暗黑模式）又回到了我们面前，越来越多的 APP 有了暗黑主题，越来月多的操作系统原生添加了 “全局暗黑模式”，那么一个网站如何跟随系统的脚步，该用暗黑模式的时候就用暗黑模式显示，该用明亮模式就用明亮主题渲染呢？

　　我在搜索引擎中检索发现了一篇关于 dark mode 的文章，其标题是《Hello darkness, my old friend》，作者是 Thomas Steiner。

　　文中介绍了有关于为什么要有 dark mode，怎样在网页中实现 dark mode 等内容。下面我把我学到的分享出来。

来玩一下

　　可以修改你的系统明亮/暗黑模式偏好，然后观察这里的文本。

　　黑夜给了我黑色眼睛，我却用它去寻找光明。

@media (prefers-color-scheme: dark) { #preferenceColor { color: rgba(153, 153, 153, 1); background-color: rgba(34, 34, 34, 1) } }@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) { #preferenceColor { color: rgba(0, 0, 0, 1); background-color: rgba(255, 255, 255, 1) } }

查询

　　对于查询 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 屏幕来说，深色的界面可以帮助节省电能；
　　帮助人们晚上方便地阅读信息；
　　对某些示例障碍人士很友好。

　　因为本人是一名视障学生的原因，我身边的低视力同学对深色界面的确是偏爱有加的。　ｄａｒｋ　ｍｏｄｅ　这样的设计，既可以让大多数人受益，也可以让小部分人受益，难道这不是最大的意义吗？

　　正如有人所说：“科技不为多数人，也不为少数人，它属于我们所有人。”　这就是最好的设计吧！