给网站增加夜间模式教程 - 大咖技术

很多网站主题都自带夜间模式，其还是有部分主题没有夜间模式，怎么加呢，接下来我们看教程：(这里以Emlog为例)

首先我们打开模板下的"footer.php"文件，在“ ”前添加如下代码：

 PHP

<script type="text/javascript">
function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "") || '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>

然后保存即可，这时候就有一些朋友问了，可以设置成时间点自动切换嘛，可以的把上面代码替换以下代码即可：

 PHP

<script type="text/javascript">
function switchNightMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "") || '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*([^;]*).*$)|^.*$/, "") === ''){
        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