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

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

因为博主并不懂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了，效果可以在本站测试。