胖蒜

分享有价值的资源

关于网站深色(黑暗)模式的思考与实践

不知从什么时候开始,应该有好几年了,网站开始兴起黑暗模式,简单来说就是白天浅色,晚上深色,美其名日护眼。看到很多网站都有,如是我也去抄了一份加在我的主题里面,可是我感觉还是有些问题,今天思考了一下,就又折腾了一下胖蒜网的主题。

网站之前的黑暗模式

我网站最开始的黑暗模式是这样的,白天是浅色,也就是正常模式,到了晚上就是深色,用一段JS代码,写好了时间,比如晚上十点到早晨六点直接深色模式,这是自动的,到了时间就切换。这样就很不好,有的用户不喜欢黑暗模式,也强制切换了。
后来,我就在右上角加上了一个按钮,可以手动切换,如果不喜欢黑暗模式,手动切换一下就可以,这样就生成了一个cookie,保存在用户浏览器的客户端,下次访问就按照用户设置的。
这样虽说解决了问题,但是体验还是感觉不好。
代码见文章《js + css 自动/手工开启网站白天/黑夜模式》,这里也再啰嗦一次。

下面说说胖蒜网之前实现的方法

在header.php里面的body标签这么改:

<body class="page-home
<?php if(!isset($_COOKIE['night'])){
    $_COOKIE['night'] = "";
}
echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

然后在footer.php里面写JS文件:

<script type = "text/javascript" >
function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(night == '0'){
        document.body.classList.add("night");
        document.cookie = "night=1;path=/";
        var night = "on";
        console.log('夜间模式开启');
    }else{
        document.body.classList.remove("night");
        document.cookie = "night=0;path=/"
        console.log('夜间模式关闭');
    }
}
//指定时间进入夜间模式
(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 20 || new Date().getHours() < 6){
            document.body.classList.add("night");
            document.cookie = "night=1;path=/";
            console.log('夜间模式开启');
        }else{
            document.body.classList.remove("night");
            document.cookie = "night=0;path=/"
            console.log('夜间模式关闭');
        }
    }else{
        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(night == '0'){
            document.body.classList.remove("night");
            console.log('夜间模式关闭');
        }else if(night == '1'){
            document.body.classList.add("night");
            console.log('夜间模式开启');
        }
    }
})();
</script>

最后,找个地方放切换按钮:

<a href="javascript:switchNightMode()" target="_self" class="darkmode"><i class="fa icon-nightmode"></i></a>

胖蒜网现在的深色(黑暗)模式实现方法

既然自己觉得之前的方法不好,那么我就去想了想,想用户的使用习惯,什么样的用户会使用黑暗模式?
一般黑暗模式,需要用户在自己的设备设置才可以,比如iOS系统,而且还要比较新的系统才行,那么既然用户去设置了这个,就代表用户默认喜欢这种色系,就没有必要去设置切换,也没有必要去自己给用户设置时间,因为这一切交给操作系统即可。
既然这种模式这么依赖用户的操作系统,那么问题就很好解决了,支持这种模式的操作系统浏览器肯定是支持的,我去找了一下也确实有现成。
拿一个平常大家都用的微信来举例,如果你的手机设置了深色模式,微信就会自动切换到深色模式,你要切换模式就得去微信设置里面。再比如说GitHub这个网站,也是用这种方式,它会根据你设备终端,跟随系统来自动切换。

在主题header.php里面加自适应代码

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">

然后自己给dark模式,写一些样式来适应,样式写在下面代码之间:

<style type="text/css">
    @media (prefers-color-scheme: dark) {
    //这里写黑暗模式样式
    }
</style>

总结

目前胖蒜网采用的是后面的方式,使用一段时间看看体验怎样,目前觉得我这种想法还是很好的,也欢迎大家发表自己的想法。

本文属原创,转载请注明原文:https://pangsuan.com/p/thinkof_web_dark_mode.html

感觉很棒,欢迎点赞 OR 打赏~

分享到:

评论 (0)

立即登录评论
马上咨询 在线工单