几行CSS让整站支持深色模式的探索与拓展

这篇文章发布于 2020年11月28日，星期六，01:00，归类于 CSS相关。阅读 3062 次, 今日 47 次 4 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9696
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、夜黑模式的检测

如何知道用户在操作系统中设置了黑夜模式呢？

如果是在APP中，可以让APP传个标志量。

如果是纯Web，则在现代浏览器下，可以使用prefers-color-scheme查询语句。

语法如下：

no-preference 系统没有告知用户使用的颜色方案。 light 表示系统倾向于使用浅色主题。 dark 表示系统倾向于使用深色主题。

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    body { background: #333; color: white; }
}
/* 浅色模式 */
@media (prefers-color-scheme: light) {
    body { background: white; color: #333; }
}

如果需要在JavaScript代码中对系统的深浅主题进行判断，可以使用原生的window.matchMedia()方法，例如：

// 是否支持深色模式
// 返回true或false
window.matchMedia("(prefers-color-scheme: dark)").matches;

二、反相是关键

白天模式网页多白底黑子，夜晚模式就是黑底白字，得，不就是颜色翻转一下嘛。

因此，如果有什么代码可以让网页的颜色反相，岂不是黑夜模式的适配分分钟实现了。

在CSS中，目前实现反相效果的方法有两个：

filter:invert(1)反相滤镜；
白色背景元素设置mix-blend-mode:difference；

我这了个极简demo给大家演示下这两种反色方法的实际效果，您可以狠狠地点击这里：黑底白字反相效果示意demo

效果如下图所示：

哟，看起来不错哦。

但是，真正应用到网页中，彩色的，非黑白的网页，效果却是怪怪的。

原因在于无论是filter:invert(1)还是mix-blend-mode:difference实现的颜色反相效果，不仅颜色的亮度反转了，颜色的色调也反转了。

实际上，对于黑夜模式，我们需要的仅仅是亮度反转，色调是不需要变化的。

于是，在实现黑夜模式效果的时候，我们还需要加一句filter:hue-rotate(180deg)旋转，我这里就换个角度单位，使用.5turn示意下。

因此，最终有了如下所示的两种建议的让整站支持黑暗模式的方法：

html {
    mix-blend-mode: difference;
    filter: hue-rotate(.5turn);
}

html {
    filter: invert(1) hue-rotate(.5turn);
}

更推荐后一种方法，反正filter滤镜都要使用的，还不如合在一起，既节约代码，理论上性能也更高。

此时页面的渲染效果就会是这样的：

看上去好多了。

但是，图像的显示有问题，图片亮度反转后的效果就像被照了X射线一样，怪毛骨悚然的，因此，对于照片类的图像，不应该参与颜色的反转，此时，可以再应用一次filter滤镜转回来就好了，负负得正。

html, img {
    filter: invert(1) hue-rotate(.5turn);
}

此时效果如下图所示：

是不是好多了？

好像图片亮了点，此时我们可以微调下，设置个半透明度，例如：

html, img {
    filter: invert(1) hue-rotate(.5turn);
}
img {
    opacity: .75;    
}

此时效果如下图所示，左边是原始效果，右边是深色模式效果：

套马的汉子溜溜溜。

眼见为实，您可以狠狠地点击这里：几行CSS实现黑夜模式效果demo

其他真实在线案例

我厂子的官网（https://www.yuewen.com/）就对深色模式进行了支持，只要你把自己的操作系统设置为黑色模式，就可以看到效果了。

例如在Windows 10系统下，右键桌面→个性化→颜色→选择默认应用模式，就可以设置浏览器为深色主题了，此时，页面的UI也会同步跟着变化，效果会很酷。

根据统计数据，有1%的人开启的深色模式，这个比例是比预想的要高的，可能是访问阅文官网的人群资深网民比较多带来的样本偏差。

三、实践经验、问题和注意事项

本文提供的黑夜模式适配方法，虽然简单，真的很简单，但是使用的时候并不是可以毫无顾忌的。

filter属性是个比较烧性能的属性，尤其这种整个网站都应用这个属性。

如果页面交互比较复杂，或者里面有很多的高性能的动画，或者你的主要用户群体使用的是Safari浏览器，则这个技术可能需要谨慎选择。

可能只能一个页面一个页面慢慢适配了。

什么样的网站适合本文的这种方法呢？

偏展示性的网站，对公司而言不是那么重要的网站，没有复杂动画的网站，没有那么多人力去维护的网站，白底黑子的网站。

还是需要不少细节调整的，不是说整个页面亮度一反转，就over了。比方说原本的黑色阴影，亮度反转后效果就很坑，此时需要把阴影效果去掉。

@media (prefers-color-scheme: dark) {
    html, img { 
        filter: invert(1) hue-rotate(180deg);
    }
    .some-ele {
        box-shadow: none;
    }
}

根据实践，就算有不少细节调整，这种实现方法，也就是先整体亮度反转，然后再具体细节调整的这种方式的成本还是要远远小于设计师调好颜色，一个一个替换那种。

所以，可以搞起来。

例如，帮助页面，文档页面几行代码撸一下效果就出来了。如果你老板不是做前端的，随便推一推再吹一吹，还以为你多牛逼呢。