如何实现网站黑暗模式

背景

互联网行业从业者，很多人喜欢在深夜工作，为此很多网站也做了夜间浏览模式，下面提供几种实现方式。

探索

1. 使用CSS媒体查询，根据系统自动切换不同样式

    
    
hello world

2. 使用JS判断，根据系统自动切换类名控制样式

    

    
    
hello world

3. 使用按钮，通过手动点击切换css文件

    


    切换

    

使用CSS filter实现

hello world

注意：html上必须要设置背景色，不然filter是无效的

filter其实是滤镜，invert()作用是反转颜色通道数值，接收的值在 0~1；hue-rotate() 的作用是转动色盘，接收的值在 0deg~360deg。这两个函数的具体计算方式可以参考MDN CSS filter。

filter虽然能够实现黑暗模式，但是有个问题，图片和背景图也会被滤镜，可以通过对图片再filter一次解决这个问题。

 

 
    
hello world
    

原图保持不变，只对其他元素滤镜，效果图：

结语

虽然用filter和切换样式这两种方式都能达到目的，如果对产品要求比较高，还是推荐使用样式切换这种方式，毕竟这种方式一切都比较可控。filter算法会出现某些颜色不是你希望的滤镜效果，而自己又不好调整，应为算法比较复杂。

如何实现网站黑暗模式首发于聚享小站，如果对您有帮助，不要忘记点赞支持一下呦