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;    
}

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

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