给博客加个夜间模式吧

发布于 2020-10-26 blog blog插件

~~白天都无人问津的破网站，真的还有人晚上来吗?~~

点击按钮切换模式

其实实现原理很简单:

点击checkbox的时候，为body新增（或移除）名为night的class，

然后在css的night.class里加入夜间模式的代码。

//利用classList.add函数给body新增一个class
//js部分
...
function {
		checkbox=document.getElementById("checkbox")
        if(!checkbox.checked){
            document.body.classList.add('night');
            console.log('夜间模式开启啦');
            checkbox.checked=true;
        }else{
            document.body.classList.remove('night');
            console.log('夜间模式关闭啦');
            checkbox.checked.checked=false;
        }
    }
 ...
 //css部分
 ...
 body.night{
  background: rgba(3,3,3,0.7) no-repeat fixed center;
  color: $night_color;//更改颜色
}
...
//为了切换更平滑，在body中加入transition
...
body{
  background: rgba(233, 233, 233, 0.9) no-repeat fixed center;
  background-size: cover;
  transition: background-color 0.6s;
  color:$day_color
}
 ...

根据时间自动切换

加入一个简单的判定，让夜间模式自动切换。

if(new Date().getHours() >=22 || new Date().getHours() <= 6){
                document.body.classList.add('night');
                console.log('夜间模式已开启，夜深啦，早点休息');
                box.checked=true;
            }else{
                document.body.classList.remove('night');
                console.log('夜间模式已关闭');
                box.checked=false;
            }

加入cookie

虽然是晚上，但是我就喜欢日间模式呀，为什么我明明关了夜间模式了，下一个页面又给我自动打开了！

这种情况不用怕，cookie轻松解决它。

//新增一个cookie，如果night=1，则开启夜间模式，否则关闭。
//因为cookie缓存在本地，所以即使点开新的网页设定也不会改变。
...
//这部分是页面加载时的自动判定代码
...
if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === '')//如果cookie不存在，则按照时间判定，并且将此时的状态写入cookie
		{
            if(new Date().getHours() >=22 || new Date().getHours() <= 6){
                document.body.classList.add('night');
                document.cookie = "night=1;path=/;SameSite=Strict";
                console.log('夜间模式已开启，夜深啦，早点休息');
                box.checked=true;
            }else{
                document.body.classList.remove('night');
                document.cookie = "night=0;path=/;SameSite=Strict";
                console.log('夜间模式已关闭');
                box.checked=false;
            }
        }
        else//如果cookie存在，则按照cookie中的设定切换夜间模式
        {
            let judge = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
            if (judge == '0') {
                document.body.classList.remove('night');
                console.log('cookie_Night_Mode:OFF');
                box.checked=false;
            } else if (judge == '1') {
                document.body.classList.add('night');
                console.log('cookie_Night_Mode:ON');
                box.checked=true;
                console.log(box.checked);
            }
        }
    ...
    //手动切换代码同样，切换之后加入cookie记录当前状态
    //此时可以用cookie作为夜间模式的判定，避免了使用checkbox作
    //判定时点击出错的问题。
    ...
    if(night == '0'){
            document.body.classList.add('night');
            document.cookie = "night=1;path=/;SameSite=Strict"
            console.log('夜间模式被手动开启啦');
            document.getElementById("switch1").checked=true;
        }else{
            document.body.classList.remove('night');
            document.cookie = "night=0;path=/;SameSite=Strict"
            console.log('夜间模式被手动关闭啦');
            document.getElementById("switch1").checked=false;
        }

关于背景的一个小问题。

这个是在设定背景图的时候发现的，设定背景图不随页面滚动的background-attachment属性在ios里无效。

原因是ios认为这个性能占用过多所以禁用了这个效果。

所以就出现了chrome上调试明明没问题但是iPhone上就是不对劲的情况。。。

解决方案也很简单，利用:before在body前新增一个伪类，然后在里面写css就🆗啦。

body:before{
  content: '';
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
background:url("https://img.yocoh.cn/images/2020/11/01/15972576896501994d72a4b81afc7.jpg") center 0 no-repeat;
  background-size: cover;

}
//当然对其他元素也能得到相应的效果。

写在最后

最近其实在blog上修修补补的地方蛮多的，但是都感觉不能单独写一篇博文，而且懒嘛，就一直没动。

其实现在的夜间模式是有个小bug的，那就是自动切换部分如果当前时间与cookie设定冲突的话，会闪烁一下。查找到的解决方案是用php写页面，然后在body处加入php代码先进行判定。

但是暂时还没想到怎么运用到现在的这个主题中。

还有就是夜间模式不是很夜间，日间也不是很好看，颜色也只是随便调整了一下，并没有认真的微调，所以有些地方会显得很突兀。

欢迎点击右下角试试，然后评论告诉我意见或建议。

以上。

上一篇: 冬日来信。下一篇: 全球变暖与薛定谔

与世界分享世界

饮夏