给网站添加一键换色,护眼功能

Mr.Wu 4,034 2 正在检测是否收录...

纯白网站其实非常非常的多,而我个人也非常喜欢白色。
博客也是走的白色风格,可是最近总是感觉,看久了眼睛特伤,作为一个喜欢折腾的博主来说,直接加个护眼功能吧~

因为博主并不懂JS,所以只有去别的有护眼的网站上面看看,把他的代码扒下来,经过一番寻找和折腾,博客护眼功能新鲜出炉,顺便把代码贴出来,跟和我一样不懂JS得童鞋分享下。

JS代码:

// 关灯切换
var body = document.body;
function style_select() {
    var neon_btn = document.getElementsByClassName("light-btn")[0];

    function style_load() {
        if(localStorage.style == "neon"){
            body.classList.add("neon");
        }
    }
    style_load();

    neon_btn.addEventListener("click", function () {
        switch (body.classList.contains("neon")){
            case true: body.classList.remove("neon"); style_save(null); break;
            case false: body.classList.add("neon"); style_save("neon"); break;
        }
        function style_save(style) {
            localStorage.style = style;
        }
    });
}
style_select();

前端调用代码:

<div class="light-btn"><i class="fa fa-eye fa-2x pull-left fa-border"></i></div>
//添加在页头或者页尾都行。

CSS 护眼颜色调整:

/* - 夜间风格 */
.light-btn{
    z-index: 1;
    cursor: pointer;
    position: fixed;
    right: 20px;
    bottom: 300px;
    color: #fff;
}
body.neon #header{
    background: url(/wp-content/themes/iDevise/images/bg_01.jpg)
}
body.neon{
    background: url(/wp-content/themes/iDevise/images/bg_01.jpg)
}
body.neon .search{
    background:#e6e6e6;
    margin-top: 20px;
}
body.neon #main{
    border-radius: 10px;
}
body.neon #footer{
    background:#fff
}

body.neon .comment-respond{
    padding-left: 10px;
}

这里的样式需要根据你的网站修改,我随便改了下,不算美观,但是不影响大局,因为我的主题代码排版问题,如果要美化护眼模式下的样式的话,很多地方的布局需要改动才行,那样太麻烦了,毕竟护眼不是默认的,只是偶尔需要切换看看,所以没必要为此花费时间去整改。
添加上面的代码后,护眼功能就OK了,效果可以在本站测试。

打赏
发表评论 取消回复
表情 图片 链接 代码

  1. 孙占论
    孙占论 Lv 1

    收下了 这个

  2. 陌小雨
    陌小雨 Lv 1

    这个挺不错的

分享
微信
微博
QQ