很多小伙伴是不是對於自己的博客主題用久了就會產生些許厭煩呢？每個人都會有，也就是貝勃定律。那么為了解決這樣的問題呢，許多小伙伴就會再次的更改自己的樣式。這樣一來，原來的博客樣式就會被丟棄，這樣是及其不有好的。第二個原因呢就是不同人群不同的年齡段不同的性格等外界因素，都會對於事物的喜感而不同。為了讓廣大地球同步都能夠愉快的再我的小窩愉快的玩耍，於是這篇文章出生了。
使用前提
已經獲得js權限，如果還沒有話呢，就需要向官方大大申請了。吶~給你郵箱contact@cnblogs.com。
效果預覽
樣式動態預覽
深夜黑主題：。超級美麗漂亮可愛的小姐姐主題：。闊耐的動漫主題：，或者點擊博客左上角進行預覽。
可以去[慕容小生](https://www.cnblogs.com/mrxs/p/10362781.html) 點擊查看效果。功能實現
實現思路
本質上講，“皮膚主題更換”就是通過腳本修改頁面配色、圖片亮度等，因此我們把問題拆開為三部分進行分析：
- 動態修改頁面配色、圖片亮度
- 具體的樣式內容
- 使用
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樣式，那么便可以隨心所欲的寫出你想要得到的任何主題的樣式！
其實這個和夜間模式有異曲同工之妙，思路上是完全一致的。