很多网站主题都自带夜间模式，其还是有部分主题没有夜间模式，怎么加呢，接下来我们看教程：(这里以Emlog为例)
首先我们打开模板下的"footer.php"文件，在“ ”前添加如下代码：
<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() > 23 || 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>代码中的"23"与"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”文件，在上添加如下代码：（此代码仅限Z-Blog）
<body class="{if GetVars('night','COOKIE') } night{/if}">其他程序尝试以下代码，若不行自行研究吧
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
还没有评论，来说两句吧...