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

使用前提

已经获得js权限，如果还没有话呢，就需要向官方大大申请了。呐~给你邮箱[email protected]。

效果预览

样式动态预览

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

功能实现

实现思路

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

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

关键代码


function switchModelMode(){
    var model = document.cookie.replace(/(?:(?:^|.*;\s*)model\s*\=\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*)model\s*\=\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.night .footer {

    color: #aaa;
}
//ID 样式
body.night #footer {
    color: #aaa;
   border: 1px solid #52646d !important;
}

如何在博客园中使用

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

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

最后说明

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

YJLAugus