网站如何支持黑暗模式

本文由 Deguang 发表于 码路-技术博客

微信支持了 Dark Mode，体验如何？

微信在周天支持了深色模式，也是我们一直在说的 Dark Mode。深色模式并不是简单的换个黑色主题，默认的聊天背景在深色模式下为深灰色（#181818），使用自定义聊天背景，微信也将会调暗背景亮度。同时，对聊天气泡、文字都进行了饱和度、亮度的调教。这样的处理比纯黑背景 + 纯白文字，对比度要更低，在保证文本可读性的情况下，减轻了用户的视觉疲劳，相对更加舒服。

操作系统 / 浏览器对 Dark Mode 的支持

从 Windows 10 的 1809 版本开始，黑暗模式在微软的自家软件中全面推开。18年苹果发布 Mojave 开始，引入了 深色模式，去年 IOS13、Android 10 上也支持这一特性，名字略有区别 苹果称之为 深色模式，安卓为 黑暗模式（Dark Mode）。同步的，Safari、Chrome 等浏览器也适配了系统中的 Dark Mode。在部分设备屏幕下（AMOLED），纯黑的背景也能带来更长的续航。

如何改造网站支持 Dark Mode ？

最简单的，我们使用媒体查询 prefers-color-scheme，这个特性用于检测用户的系统主题是浅色或深色。属性的取值有三种：

• no-preference：用户未指定系统主题
• light：浅色主题
• dark：深色主题

当用户系统主题，选择了 深色模式或者夜间模式的时候，下面的样式代码将会生效：

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: #ccc;
  }
}

prefers-color-scheme能够兼容主流浏览器的较新版本，

这里也支持使用 JavaScript 获取当前浏览器对于 prefers-color-scheme 的支持情况：

if (window.matchMedia('(prefers-color-scheme)').media === 'not all') {
  console.log('Browser doesn\'t support dark mode');
}

当然这里，采用了最粗暴的方式，修改背景颜色为黑色、文字颜色为灰色，在实际业务场景中，应当结合站点内容、调和对比度，达到柔和展现的效果。

另外，现在也有现成的方案需要进行网站的“一键式”改造： Darkmode.Js

推荐阅读：做一个引起极度舒适的「深色模式」，到底有多难？

国殇民痛如何黑白致哀

类似深色模式，在一些灾难导致国殇民痛的时候，很多网站会将整站灰掉，以示哀悼。如何产生这种灰调的效果呢？

这里给根元素 设置 filter: grayscale(100%)，即可快速实现网站变成灰度模式。filter CSS 属性将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像，背景和边框的渲染。这里使用了 grayscale 函数，用于将图像等元素转换为灰度。

扩展阅读

• iOS 13 也要加入黑暗模式，「全员皆黑」的时代来了？
• 做一个引起极度舒适的「深色模式」，到底有多难？
• MDN prefers-color-scheme
• MDN filter