网站添加暗黑模式
in Skill with 2502 Views

网站添加暗黑模式

in Skill with 2503 Views

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

首先第一步,在您的页面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>

加好后在您的页面body处加入php判断,这样当检测到cookie相关字段时直接输出body的class为night,已防止页面闪烁。

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

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

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

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

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

至此教程就结束了,需要强调的是,该方法需要修改的css非常的多,需要大家细心的调整及适配,不太建议过于复杂的网站添加此功能,不然css写到你哭,哈哈!

如果本文对您有用的话,欢迎在下方留言评论哦~
发表评论 / 回复评论
选择表情
  1. zmmio
    B罩

    想咨询下,当把Dark放在菜单位置后,但是手机端并不能显示,这个要怎么解决。

    Chrome 76 四川省泸州市 电信
    1. Jdeal
      主人
      @zmmio

      header一共有两个菜单要加按钮,一个对应手机端,一个对应电脑端,需要在两个里面都写上按钮代码,不然只会在其中一个显示。

      Chrome 76 江苏省无锡市 电信
      1. zmmio
        B罩
        @Jdeal

        懂了,感谢!

        Chrome 76 四川省泸州市 电信
        1. zmmio
          B罩
          @zmmio

          还是再求问下,新建的dark的css怎么写? aru_16.png

          Chrome 76 四川省泸州市 电信
          1. Jdeal
            主人
            @zmmio

            暗黑的css在需要调整的class或id前加上body.night,比如你要修改暗黑模式下的文章内容背景,就是在css里写body.night .main-content{background-color: #263238!important;}类似这样的的写,就是在要调整的元素前面加上body.night 就行,后面可以接.class名或者#id名,要调整的地方很多,需要一个一个查的,哈哈,比较耗时间。

            Chrome 76 江苏省无锡市 电信
            1. zmmio
              B罩
              @Jdeal

              不是不是,css这些我已经改完了,我的意思是移动端菜单这里,新增加的按钮的css怎么写?我不怎么懂css,求教一下

              Chrome 76 四川省泸州市 电信
  2. 吴尼玛
    A罩

    我是直接用PHP判断时间段来自己加载非洲模式的。

    Chrome 76 湖南省湘西州吉首市 电信
  3. 云中君
    A罩

    这个方法有问题!在安卓端不能切换了!

    Chrome 75 黑龙江省哈尔滨市 联通
    1. Jdeal
      主人
      @云中君

      抱歉,我没有安卓设备,不过我让我朋友在安卓上刚刚试了,我的网站有用啊,可以使用。

      Safari 12 江苏省无锡市 移动
      1. 云中君
        A罩
        @Jdeal

        可以试下把时间弄成,晚上12点,然后启动夜晚模式,然后再把时间调成中午12点,网站还是夜晚模式!

        Safari 12 黑龙江省哈尔滨市 联通
        1. Jdeal
          主人
          @云中君

          可以的啊,我刚试过了啊,你换个浏览器,因为可能有缓存的吧。

          Safari 12 江苏省无锡市 移动
  4. 永爱
    A罩

    根据大佬的操作仍然没有实现,求助!

    搜狗浏览器 上海市 联通