chrome 76开启深色模式适配

2019年7月12日约 1105 字需时 3 分钟深色阅读

🎉🎉一个普大喜奔的好消息：最新的Chrome 76 Beta特性更新说明¹，已经宣告正式支持“prefers-color-scheme(以下简称PCS)”CSS选项。这个选项有啥用呢？

如果浏览器支持这一选项，而您的网站恰好支持dark mode主题，您无需切换任何内容，因为浏览器会为您处理日间/夜间主题切换，你就不需要装Dark Reader、Night Eye、High Contrast、Turn Off the Lights等诸如此类的chrome扩展²。

PCS是何方妖孽？

根据最早支持PCS的Firefox文档介绍：

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.

自macOS Mojave引入了暗黑模式主题后，越来越多第三方App进行了相关适配，可用户使用最多的浏览器却没能很好的支持，究其原因，主要有两个，一是浏览器没有给出让开发者适配的接口，二是网站设计并不统一，强行进入暗黑模式会破坏页面的设计和内容的可读性。

2019年伊始，macOS终于加入了新的媒体查询prefers-color-scheme，紧接着，各路浏览器终于在PC端新版本中，陆续增加了对PCS特性的支持，依次是firefox 67 -> safari 12.1 -> egdge 76 -> chrome 76，在这一方面，Chrome远远落伍于Firefox、Safari甚至Edge。但是老谚云：better late than never，不是么?

Name:   prefers-color-scheme
For:    @media
Value:  no-preference | light | dark

根据 css 草案介绍，PCS属性有三个值:dark, light, no-preference

no-preference: 此用户系统并没有设置相关的值
dark: 暗黑模式(暗黑背景+浅色文字)
light: 浅色模式(浅色背景+暗黑文字)

如果想了解更多信息，请关注这篇题为《Hello Darkness, My Old Friend 》的文章。

如何适配PCS特性

以本主题为例，编辑Hugo主题的layout-header代码（每个主题位置各异），将下列代码写入head标签内³⁴，一般网站默认都是light模式的，所以只写入dark模式的样式即可：

<style>
@media (prefers-color-scheme: dark) {
  /* styles for users who prefer UIs with dark themes */
}
</style>

最简单的处理是利用css3的filter滤镜来变个小魔法，下列代码仅供演示：

@media (prefers-color-scheme: dark) {
  body { filter: invert(100%); }
  img { filter: invert(100%); }
  body { background-color: #000!important; }
}

<script>
if (matchMedia('(prefers-color-scheme: dark)').matches) {
  // conditional JavaScript code for such users
}
</script>

指定专用打印样式

暗黑模式下，打印网站可能会将黑色背景也打印出来，因此，有必要为打印机指定专用的打印样式，例如：

<link rel="stylesheet" media="print" href="my-print-style.css">

或者亦可使用现成框架库Gutenberg方案

<link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.4" media="print">
<link rel="stylesheet" href="https://unpkg.com/gutenberg-css@0.4/dist/themes/oldstyle.min.css" media="print">

后记：本站已成功启用暗黑主题适配，但一键临时深色功能模块与暗黑主题尚不能完美融合，亦即夜间进入暗黑模式后，toggletheme功能会失效，该问题等空了再想办法修复。