前言

为了让博客实现夜间模式我整整折腾了将近一周的时间，通过各种办法各种方式去搜索：有在百度上搜索的；有在 Q 群里询问的; 有在微信群里咨询的...... 可谓是用尽了一切能弄的办法到最终都以失败而告终。就在我准备放弃的时候一个热心的不厌其烦的大佬手把手的教我，甚至直接帮我操作最后终于实现了。兴奋！激动！感恩！在这里直接贴上大佬的博客：jdeal 大神

辛苦的探索之路

百度找度娘

在百度上搜索“typecho 夜间模式”后，我刚开始锁定了两位大佬的博客，一位是 QQ 爹，一位是友人 C 。首先这两位大佬分享的教程都非常的详细，将如何实现夜间模式的原理分析的非常的透彻。可是无奈的是我是一个小白中的小白，这些原理对于我而言完全是天书一般，不知从何入手。于是研究了半天都没有研究出了所以然只好放弃。

Q 群找大佬

百度度娘失败之后我就直接找大佬询问，心想关于一些具体操作和细节还是要问人才行，在各大 Q 群里喊了半天，不但没有得到想要的答案，反而被很多人嘲笑和奚落。都是大神，可能对于我这种小白问的小白问题都不屑于顾吧！不过也没有办法，谁叫我是小白呢？不想再听到大神的说教于是问人也只好作罢。

坚持就是胜利

虽然受到了各种各样的打击但我并没有放弃，还是回到最开始的地方，继续在度娘上寻求答案，在经历了无数次的挫折和失败后，终于让我遇到了救星——jdeal 大神。
再次感谢大神的耐心指导和帮助，从下午 3 点一直到晚上 10 点，从外面一直到家里，一遍又一遍的不厌其烦的手把手的教我这个笨笨的小白，最后直接亲自上阵，最终终于实现了盼望已久的——夜间模式！

独乐乐不如众乐乐

在我寻求答案的道路上我发现有很多人和我一样也在苦苦的寻求着答案，他们也和我一样的迷茫，一样的处处碰壁，一样的经历了一次次的失败。我比他们幸运，因为我已经找到了答案，但是他们呢？仍然在黑暗的道路上继续摸索。我不想看到他们走我的老路，所以我把我的经验分享出来，希望对大家有所帮助！

食用方法

唠叨了这么久现在进入主题，首先第一步，在您的页脚文件：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=/";
    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>

加好后在您的页面 body 处加入 php 判断，这样当检测到 cookie 相关字段时直接输出 body 的 class 为 night，已防止页面闪烁。在头部文件：header.php 文件中加入以下代码

<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">

如果原中已有了 class 的话就将 <?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?> 放在 class=“”里面。

最后再将网站中所有需要变暗的地方调整其 css，已达到变暗效果，具体 css 调整示例可看下方。

body.night 需要调整的区块{
background-color: #000000;
color: #aaa;
}
body.night img {filter: brightness(30%);
}

由于每个网站或者博客 CSS 的命名不一样，所以请根据自己的网站 / 博客 CSS 进行修改，大家可以通过右键“审查元素”来获取 CLASS 的
名字。以下是我网站的 CSS 其中一部分，大家可以做个参考

}body.night .post-data,body.night h2,body.night h1,body.night h3,body.night,body.night .header,body.night .header .icon-search,body.night .comment-container,body.night .related-post-lists,body.night .footer,body.night .post-bottom-bar,body.night .post-tags body.night .reply2view,body.night .comment-view,body.night .comment-form,body.night .bottom-bar-items a,body.night .comment-form input,body.night .comment-form .form-control,body.night .comment-form .submit,body.night .protected .text,body.night .dengji{background-color: #263238!important;color: #888282!important;}

每个 CLASS 的区块都要用“body.night 需要调整的区块”书写，如“body.night h2”、“body.night .post-tags”等。

这样当晚上 9 点到白天 6 点之间，网站打开时就自动会变成暗黑模式。当然，你也可以加一个按钮，来手动控制打开关闭暗黑模式。如下代码。

<a href="javascript:switchNightMode()" target="_self">Dark</a>

最后再次感谢大神：jdeal 大神的帮助！

给博客/网站添加夜间/护眼模式

前言