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

╰半橙微兮° 2023-08-17 16:03 87阅读 0赞

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

## 使用前提 ##

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

## 效果预览 ##

### 样式动态预览 ###

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

## 功能实现 ##

### 实现思路 ###

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

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

### 关键代码 ###

利用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样式，那么便可以随心所欲的写出你想要得到的任何主题的样式！  
其实这个和[夜间模式][Link 2]有异曲同工之妙，思路上是完全一致的。

转载于:https://www.cnblogs.com/yjlaugus/p/11223861.html

[Link 1]: https://baike.baidu.com/item/%E8%B4%9D%E5%8B%83%E5%AE%9A%E5%BE%8B/4341066
[Link 2]: https://www.cnblogs.com/yjlaugus/p/8485293.html