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

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

使用前提

已经获得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.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样式，那么便可以随心所欲的写出你想要得到的任何主题的样式！
其实这个和夜间模式 <https://www.cnblogs.com/yjlaugus/p/8485293.html>有异曲同工之妙，思路上是完全一致的。

热门工具换一换