前言

web應用程序，切換主題，給其換膚，是一個比較常見的需求。

• 如何能快速的切換主題色？(只有固定的一種皮膚)
• 如果又想把主題色切換為以前的呢？（有多種可切換的皮膚）
• 該以何種方式編寫標簽的css屬性？

快速切換主題這個需求，它考驗了項目的CSS代碼，是否具有可維護性、可擴展性。
css要如何編寫，才能達到這兩點呢，我還在研究學習當中，可以參考在大型項目中組織CSS。
本來，此文想寫這個的，發(fā)現(xiàn)道行不夠(┬＿┬)，我還是寫如何實現(xiàn)的，比較好。

想要換主色調(diào)，其實就是換一種風格樣式，最終都是換css。
我看目前比較流行的幾種切換主題的方式：

• 所有樣式的css模版都在項目中，根據(jù)條件，給body添加class，通過不同的class來顯示不同的樣式。
• 通過引用不同的link文件，達到效果。
• ElementUI的這種方式，詳情見ISSUE
  （1） 先把默認主題文件中涉及到顏色的 CSS 值替換成關(guān)鍵詞
  （2） 根據(jù)用戶選擇的主題色生成一系列對應的顏色值
  （3） 把關(guān)鍵詞再換回剛剛生成的相應的顏色值
  （4） 直接在頁面上加 style 標簽，把生成的樣式填進去

我目前用的是第一種方式，把操作過程記錄下來，方便以后查看。

如何增加主題文件-具體操作過程

動態(tài)換膚.gif

說明：此項目UI是在elementUI基礎(chǔ)上建立的，所以，我們可以通過element提供的方法，來自定義主題。

生成自定義主題文件

使用工具下載自定義主題文件，并命名為wq-variables.css。以后我們?nèi)绻胍黾又黝}文件，只需要修改變量文件中各個變量所對應的值。

編譯主題

我們利用工具來編譯主題。
在終端，將剛剛修改好的變量文件，通過命令node_modules/.bin/et -c wq-variables.css來編譯主題。

給自定義主題增加命名空間

默認情況下，編譯的主題目錄會放在./theme下。由于，我們是通過改變css的命名空間來切換主題的，那么，我們就需要為剛生成的主題增加命名空間。主題文件內(nèi)容很多，如果手動一個個添加命名空間，工作量巨大，這個時候，可以使用另一個給css增加命名空間的工具。下載這個項目，然后只需要修改gulpfile.js文件中3處內(nèi)容，就可以得到想要的內(nèi)容，這里注意，本項目css自定義的命名空間統(tǒng)一為custom-******,其中******建議使用主題色的16進制編碼,也可以使用其他字符串，但是要和radio標簽統(tǒng)一。

引用自定義主題

自定義主題文件，已經(jīng)有了，只剩下如何引入使用了。

• 在App.vue中import新增的主題樣式（這個也可以寫在topbar.vue文件中，到底哪種好些，我也不清楚）
• 在./src/components/nav/topbar/topbar.vue中，添加對應的radio標簽
  經(jīng)過以上兩步，就可以正常使用了。

如何處理與自定義主題不同部分的樣式

可以新建一個css文件，然后在其中編寫樣式，之后在入口文件引入就ok了。

具體效果，可查看于此網(wǎng)站：
http://weiqinl.com/vue-element-admin/

此做法參考于：
基于Element的動態(tài)換膚