网站添加暗黑模式html+js-朝晞小屋

图片[1]-网站添加暗黑模式html+js-朝晞小屋

有些时候我们喜欢大半夜不睡觉刷抖音刷微博，突发奇想为什么我们不能让网站在夜间的时候自动打开夜间模式，让网页背景变暗，让图片变暗，这样那些夜猫观看我们的博客时候就不会那么刺眼.

首先第一步，在您的页面footer文件加入以下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>
< 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>
< 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，已防止页面闪烁。


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

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


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

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


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

文章版权声明 1、本网站名称：朝晞小屋
2、本站永久网址：https://www.zxiyun.com/
3、更多有趣网站：http://dh.zxiyun.com/
4、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长QQ2604140139进行删除处理。
5、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
6、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
7、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

The reason why a great man is great is that he resolves to be a great man.

伟人之所以伟大，是因为他立志要成为伟大的人

文章版权归作者所有，未经允许请勿转载。

THE END