博客自动切换夜间模式

  本文最后更新于2019年09月09日;------ Ps: 转让宝塔面板专业版永久授权20人版.

  追完剧,毫无睡意。顺手点开博客,一片刺眼的白光,顿时想起我之前准备搞的自动切换夜间模式……

  正好没有睡意,想着先用手机找找大佬们的教程看看,在度娘和谷哥的帮助下找到两位大佬的文章,QQdie猫与向日葵。看了下感觉也不难,就不开电脑了,直接用手机开搞吧。

大致思路

  • 首先得自己设计一套夜间css样式,这个我帮不了你,根据自己的主题慢慢改,或者直接用反色滤镜。
  • 判断当浏览器时间大于21点小于6点时会自动进入夜间模式,并存储cookie。
  • 一些优化,比如有cookie时不会切换页面,而是直接输出css
  • 具体的我也说不清,能跑来看这篇文章的估计和我一样也不想知道那么多

具体操作

  • 在你的footer.php中的</body>前插入下面的代码,(前半部分实现夜间模式的切换,后半部分是指定时间自动切换)
< 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=/";
    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() > 21 || 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")
    } else {
        if (night == "1") {
            document.body.classList.add("night")
        }
    }
  }
})();
</script>
  • 修改或者添加header.php文件<body class= >
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
  • 设置夜间模式css,类似这样
body.night {
background-color: #000000;
color: #aaa;
}
body.night img {
filter: brightness(30%);
}
  • 手动切换夜间模式,放在需要的地方即可
<a href="javascript:switchNightMode()" target="_self">夜间模式</a>

大功告成是不是很简单:)

- THE END -