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

摘要

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

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

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