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

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

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

来玩一下

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

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

查询

  对于查询 Web 浏览器是否支持 dark mode,作者提供了下面的媒体查询代码:

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
    console.log('Dark mode is supported');
}

  位一个网站适配 dark mode 模式同样依靠 CSS 媒体查询。

  作者的思路是把关于网页 dark modelight mode 差异的代码放到 dark.csslight.css 里, 把其他样式放入 style.css 中去,接着在使用外部链接的方式把它们链接进来,对 dark.csslight.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;
}

支持情况

以下操作系统拥有 dark mode 的开关:

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

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

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

标签: Chrome, 无障碍, CSS, Web, FireFox

添加新评论