不知从什么时候开始，应该有好几年了，网站开始兴起黑暗模式，简单来说就是白天浅色，晚上深色，美其名日护眼。看到很多网站都有，如是我也去抄了一份加在我的主题里面，可是我感觉还是有些问题，今天思考了一下，就又折腾了一下胖蒜网的主题。
网站之前的黑暗模式
我网站最开始的黑暗模式是这样的，白天是浅色，也就是正常模式，到了晚上就是深色，用一段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
评论 （0）