【翻译】网页CSS切换暗黑模式

原文地址：Dark Mode Website Css

现在手机系统都有一个暗黑模式和一个普通的明亮模式，网站会根据你设备的设置来展示对应模式。

这种即时变换的外观是靠以下CSS来实现的，支持的浏览器有： Firefox、Safari和Chrome。

@media (prefers-color-scheme: dark) {
    body {
        background-color: #444
        color: #e4e4e4
    }
    a {
        color: #e39777
    }
    img {
        filter: grayscale(30%)
    }
}

Light on dark

最重要的模块是重写文字和背景的颜色。

body {
    background-color: #444
    color: #e4e4e4
}

一般来说推荐文字不要采用纯白色，所以我同样没有用纯黑色作为背景。

Desaturate colors 减少颜色饱和度

在暗黑背景中，我使用的超链接强调的颜色看起来比较丑，所以我用了饱和度更小的颜色。

a {
  color: #e39777
}

照片同样也很难看。事实证明大家更喜欢暗黑模式中减少一点饱和度的图片。

img {
  filter: grayscale(30%)  // 将图像转换为灰度图像
}

你可能要用更特定的选择器来区别处理矢量图。

Read more

以上所述均为Thomas Steiner的文章Hello darkness, my old friend精简出来的，该文章中还有关于颜色主题更有精彩的内容，例如：

随着更多复杂的所见即所得桌面版本的发布，使用虚拟文档类似于物理纸张的想法变得流行起来...

第一款面世的浏览器-万维网，就是这样显示网页的。有趣的是：第二款面世的浏览器，基于终端的命令行模式浏览器在暗黑模式下是绿色的。