还在美化博客吗？试试一键更换博客主题吧！

很多小伙伴是不是对于自己的博客主题用久了就会产生些许厌烦呢？每个人都会有，也就是贝勃定律。那么为了解决这样的问题呢，许多小伙伴就会再次的更改自己的样式。这样一来，原来的博客样式就会被丢弃，这样是及其不有好的。第二个原因呢就是不同人群不同的年龄段不同的性格等外界因素，都会对于事物的喜感而不同。为了让广大地球同步都能够愉快的再我的小窝愉快的玩耍，于是这篇文章出生了。

使用前提

已经获得js权限，如果还没有话呢，就需要向官方大大申请了。呐~给你邮箱contact@cnblogs.com。

效果预览

样式动态预览

深夜黑主题：。超级美丽漂亮可爱的小姐姐主题：。阔耐的动漫主题：，或者点击博客左上角进行预览。

可以去[慕容小生](https://www.cnblogs.com/mrxs/p/10362781.html) 点击查看效果。

功能实现

实现思路

本质上讲，“皮肤主题更换”就是通过脚本修改页面配色、图片亮度等，因此我们把问题拆开为三部分进行分析：

• 动态修改页面配色、图片亮度
• 具体的样式内容
• 使用 JavaScript 动态修改页面配色、图片亮度 。

关键代码

function switchModelMode(){
    var model = document.cookie.replace(/(?:(?:^|.*;s*)models*=s*([^;]*).*$)|^.*$/, "$1") || '0';
    if(model == '0'){
        document.body.classList.add('model');
        document.cookie = "model=1;path=/"
        console.log('皮肤模式开启');
    }else{
        document.body.classList.remove('model');
        document.cookie = "model=0;path=/"
        console.log('皮肤模式关闭');
    }
}


(function(){

        var model = document.cookie.replace(/(?:(?:^|.*;s*)models*=s*([^;]*).*$)|^.*$/, "$1") || '0';
        if(model == '0'){
            document.body.classList.remove('model');
        }else if(model == '1'){
            document.body.classList.add('model');
        }
  
})();

利用JS中Element.classList的add()和remove()方法，正好满足我们的需求，且支持绝大多数浏览器(IE10以上支持)
但先别急着写，在皮肤更改的时，注意一个小的细节还：更改后的这个状态应被保存下来一直生效，或持续到本次会话结束，此事我们便可以利用cookie来解决这个问题。

注意到model,接下来的样式中我们将多次使用它。

具体的样式

在上面的代码中，我们控制了body的class，这是所有页面元素的祖先元素。更改皮肤模式时候，body的class值含有model，因此在编写夜间模式的样式时，在样式选择器前加body.night即可，可酌情使用!important，在下面的样式中，大家可以根据自己的博客主题的class 或 id 名称写样式。
例如:

//body样式
body.model{
    background-color: #263238;
    color: #aaa;
}
//class 样式
body.model .footer {
 
    color: #aaa;
}
//ID 样式
body.model #footer {
    color: #aaa;
   border: 1px solid #52646d !important;
}

如何在博客园中使用

• 样式可以直接写在自定义css中，也可以用link标签引入。
• 上面的js代码可以写在侧边栏。
• 调用可以是使用按钮或是链接的方式,即调用js方法。例如：

阔耐的动漫主题：<input type="button" value="开启/关闭ercy模式" onclick="switchModelErcyMode();">。

最后说明

因为时间的原因，很多样式做的不尽人意，欢迎大家批评指正，后续的样式我会一点点修改，此文章仅供大家参考，同时也欢迎大家在评论区交流。只要你熟悉css样式，那么便可以随心所欲的写出你想要得到的任何主题的样式！
其实这个和夜间模式有异曲同工之妙，思路上是完全一致的。