当前位置：首页 > 技术类 > 自己动手给网站增加一个夜间模式

自己动手给网站增加一个夜间模式

微信用户4年前 (2022-02-23)技术类3292

教大家怎么给自己的网站添加一个夜间模式，当然代码不是我制作开发的，我不生产代码，我只是代码的搬运工（广告词很熟悉哈），好了不多说废话，这个代码是在网上找到，也不知道原始作者是谁，感谢您的无私奉献。好了，废话少说，开始表演。。。

首先，我们需要在主题模板中打开“footer.php”文件，在“</body></html>”前添加如下代码：

JavaScript

<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>

保存文件即可，如果想要实现自动切换夜间模式，那么直接复制如下代码：

JavaScript

<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”文件，我们需要给网站填写一个按钮，以此来手动开启和关闭夜间模式：

Markup

<a class="at-night" href="javascript:switchNightMode()" target="_self"></a>

复制如上代码，放在你认为合适的地方，然后保存，登录后台，清空主题模板缓存编译，然后打开首页，测试夜间模式是否有效。
其实教程到这才算是完成一般，因为你在测试的过程中会发现，开启夜间模式并没有效果，，，嗯嗯是的，因为你们没有适配夜间模式的css，这个教程写不出，因为每个主题模板的div框架和css命名不同，无法统一，所以需要您自己去查找对应的class类，然后添加夜间模式的样式，例如：

CSS

body.night DIV名称 {
    background-color: #263238;
    color: #aaa; }

这样一来开启夜间模式后背景色就换成了黑色，字体是白色，如果网站css框架太多，相信我这绝对是一个大坑，哦对了，防止css样式重叠，建议在css样式表最底下适配夜间模式的代码。
这些都配置完成，前台查看首页，你会发现在夜间模式下会出现闪屏，就是，打开一个页面的瞬间是正常模式，然后在1秒（电脑速度慢的时候可不止1秒）后转换成夜间模式，哇塞，简直就是亮瞎眼有木有？别急，教你一个办法，打开“header.php”文件，在<body>上添加如下代码：（此代码仅限Z-Blog）

Markup

<body class="{if GetVars('night' 'COOKIE') } night{/if}">

其他程序（TP5或者Typecho等）使用这个：

Markup

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

这样就解决闪屏的BUG了，当检测到cookie相关字段时直接输出body的class为night，就可以已防止页面闪烁。好了，准备下班~有不懂得留言，别告诉我让我给你们适配夜间模式css，我做不到，，，我的锦鲤目前还是适配中，代码太多，太焦躁。。。

哦对了，还是那句话，修改前记得备份主题模板文件！

免责声明

    本网站在国家相关法律法规规定的范围内，只按现有状况提供文章发布第三方网络平台服务，本网站及其所有者非交易一方，也非交易任何一方之代理人或代表；同时，本网站及其所有者也未授权任何人代表或代理本网站及其所有者从事任何网络交易行为或做出任何承诺、保证或其他类似行为，除非有明确的书面授权。
    鉴于互联网的特殊性，本网站无法鉴别和判断相关交易各主体之民事权利和行为能力、资质、信用等状况，也无法鉴别和判断虚拟交易或正在交易或已交易之虚拟物品来源、权属、真伪、性能、规格、质量、数量等权利属性、自然属性及其他各种状况。因此，交易各方在交易前应加以仔细辨明，并慎重考虑和评估交易可能产生的各项风险。