前言
web應用程序，切換主題，給其換膚，是一個比較常見的需求。
- 如何能快速的切換主題色？(只有固定的一種皮膚)
- 如果又想把主題色切換為以前的呢？（有多種可切換的皮膚）
- 該以何種方式編寫標簽的css屬性？
快速切換主題這個需求，它考驗了項目的CSS代碼，是否具有可維護性、可擴展性。
css要如何編寫，才能達到這兩點呢，我還在研究學習當中，可以參考在大型項目中組織CSS。
本來，此文想寫這個的，發現道行不夠(┬＿┬)，我還是寫如何實現的，比較好。
想要換主色調，其實就是換一種風格樣式，最終都是換css。
我看目前比較流行的幾種切換主題的方式：
- 所有樣式的css模版都在項目中，根據條件，給body添加class，通過不同的class來顯示不同的樣式。
- 通過引用不同的link文件，達到效果。
- ElementUI的這種方式，詳情見ISSUE
（1） 先把默認主題文件中涉及到顏色的 CSS 值替換成關鍵詞
（2） 根據用戶選擇的主題色生成一系列對應的顏色值
（3） 把關鍵詞再換回剛剛生成的相應的顏色值
（4） 直接在頁面上加 style 標簽，把生成的樣式填進去
我目前用的是第一種方式，把操作過程記錄下來，方便以后查看。
如何增加主題文件-具體操作過程
說明：此項目UI是在elementUI基礎上建立的，所以，我們可以通過element提供的方法，來自定義主題。
生成自定義主題文件
使用工具下載自定義主題文件，並命名為wq-variables.css。以后我們如果想要增加主題文件，只需要修改變量文件中各個變量所對應的值。
編譯主題
我們利用工具來編譯主題。
在終端，將剛剛修改好的變量文件，通過命令node_modules/.bin/et -c wq-variables.css來編譯主題。
給自定義主題增加命名空間
默認情況下，編譯的主題目錄會放在./theme下。由於，我們是通過改變css的命名空間來切換主題的，那么，我們就需要為剛生成的主題增加命名空間。主題文件內容很多，如果手動一個個添加命名空間，工作量巨大，這個時候，可以使用另一個給css增加命名空間的工具。下載這個項目，然后只需要修改gulpfile.js文件中3處內容，就可以得到想要的內容，這里注意，本項目css自定義的命名空間統一為custom-******,其中******建議使用主題色的16進制編碼,也可以使用其他字符串，但是要和radio標簽統一。
引用自定義主題
自定義主題文件，已經有了，只剩下如何引入使用了。
- 在
App.vue中import新增的主題樣式（這個也可以寫在topbar.vue文件中，到底哪種好些，我也不清楚） - 在
./src/components/nav/topbar/topbar.vue中，添加對應的radio標簽
經過以上兩步，就可以正常使用了。
如何處理與自定義主題不同部分的樣式
可以新建一個css文件，然后在其中編寫樣式，之后在入口文件引入就ok了。
具體效果，可查看於此網站：
http://weiqinl.com/vue-element-admin/
此做法參考於：
基於Element的動態換膚