首页 » 建站手册 » 网站夜间模式使用css调节frame及图片亮度

网站夜间模式使用css调节frame及图片亮度

谷歌已收录,更新于2019年07月13日; 如遇到问题,请留言及时通知站长; 欢迎加入 三生三世,讨论各种问题!

说明

很多网站都有夜间模式,我的站之前也有,现在懒得加了。都晚上了,看网站干啥,早点睡觉才对。今天,就不扯没用的了。除了奉上从别人那看来的夜间模式添加方法,最主要的就是今天要说的css里的亮度属性。最后发完文章,emmm,关于亮度就一条css代码了。

夜间模式

emmm,尴尬不,看到一半发现原作者写过这个样式。可我都码了几个字了,那就把文章搬过来算了。以下文章全部来自这个链接,只在个别语句作了调整。

js实现

JSElement.classListadd()remove()方法,可以给置顶标签添加一个属性以及移除属性。首先,要设置一个cookienight,用来描述当前是否夜间模式,确实是否给body添加属性dark

function switchDarkMode(){
    var night = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
    if (night == '0'){
        document.body.classList.add('dark');
        document.cookie = "dark=1;path=/";
        console.log('Dark mode on');
    }else{
        document.body.classList.remove('dark');
        document.cookie = "dark=0;path=/";
        console.log('Dark mode off');
    }
}

然后,接下来再通过时间判断,再次给cookie赋值、body添加属性。

(function(){
    if(document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){
        if(new Date().getHours() > 22 || new Date().getHours() < 6){
            document.body.classList.add('dark');
            document.cookie = "dark=1;path=/";
            console.log('Dark mode on');
        }else{
            document.body.classList.remove('dark');
            document.cookie = "dark=0;path=/";
            console.log('Dark mode off');
        }
    }else{
        var dark = document.cookie.replace(/(?:(?:^|.*;\s*)dark\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(dark == '0'){
            document.body.classList.remove('dark');
        }else if(dark == '1'){
            document.body.classList.add('dark');
        }
    }
})();

夜间按钮

在你想要显示夜间按钮切换的地方,按钮添加如下属性即可。你可以在你网站看看有没有按钮,比如回到顶部按钮,然后找到源码,copy一份,然后修改添加如下属性即可。

onclick="switchDarkMode()"

防止闪屏

因为前端的夜间模式,通过js实现。所以,在页面切换时,会有js执行的过程,所以会出现屏幕从亮变暗的过程。所以,我们需要在后端判断cookie值,然后给body在后端添加属性即可。

<body class="<?php if($_COOKIE['dark']=='1'){echo'dark';} ?>">

css属性

body标签我们已经加了一个属性dark,所以你要改夜间模式的样式,就需要写个body.dark,然后后面跟你的样式即可。下面是几个简单的例子。

body.dark{background-color:#263238;color:#aaa}
body.dark code{color:#000}
.body-dark iframe{filter:brightness(50%)}

上述代码中,第一行是将body区域的背景色及字体颜色修改,第二行是改了代码部分,第三行是将外部引入的iframe亮度调整未50%

后续说明

不懂再问吧,或者可以参考原作者链接

一个只会魔改主题,而不会制作主题的站长,专业扒各种网站的各种样式。希望每一位来到这里的访客,都能拿到你们需要的资源!

发表评论

已有 2 条评论

  1. Eltrac Eltrac说道:

    所以你的夜间模式呢_(:з」∠)_

    1. 枂下 枂下说道:

      懒得加夜间模式了,没啥用

返回主页看更多
赏杯咖啡给站长 支付宝 扫一扫