還在美化博客嗎？試試一鍵更換博客主題吧！

不少小夥伴是否是對於本身的博客主題用久了就會產生些許厭煩呢？每一個人都會有，也就是貝勃定律。那麼爲了解決這樣的問題呢，許多小夥伴就會再次的更改本身的樣式。這樣一來，原來的博客樣式就會被丟棄，這樣是及其不有好的。第二個緣由呢就是不一樣人羣不一樣的年齡段不一樣的性格等外界因素，都會對於事物的喜感而不一樣。爲了讓廣大地球同步都可以愉快的再個人小窩愉快的玩耍，因而這篇文章出生了。

使用前提

已經得到js權限，若是尚未話呢，就須要向官方大大申請了。吶~給你郵箱contact@cnblogs.com。

效果預覽

樣式動態預覽

深夜黑主題：。超級美麗漂亮可愛的小姐姐主題：。闊耐的動漫主題：，或者點擊博客左上角進行預覽。

功能實現

實現思路

本質上講，「皮膚主題更換」就是經過腳本修改頁面配色、圖片亮度等，所以咱們把問題拆開爲三部分進行分析：

• 動態修改頁面配色、圖片亮度
• 具體的樣式內容
• 使用 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樣式，那麼即可以爲所欲爲的寫出你想要獲得的任何主題的樣式！
其實這個和夜間模式有殊途同歸之妙，思路上是徹底一致的。