前言
web應(yīng)用程序南缓，切換主題目锭，給其換膚和泌，是一個(gè)比較常見(jiàn)的需求村缸。
- 如何能快速的切換主題色？(只有固定的一種皮膚)
- 如果又想把主題色切換為以前的呢武氓？（有多種可切換的皮膚）
- 該以何種方式編寫(xiě)標(biāo)簽的css屬性梯皿？
快速切換主題這個(gè)需求仇箱，它考驗(yàn)了項(xiàng)目的CSS代碼，是否具有可維護(hù)性东羹、可擴(kuò)展性剂桥。
css要如何編寫(xiě)，才能達(dá)到這兩點(diǎn)呢百姓，我還在研究學(xué)習(xí)當(dāng)中渊额，可以參考在大型項(xiàng)目中組織CSS况木。
本來(lái)垒拢，此文想寫(xiě)這個(gè)的，發(fā)現(xiàn)道行不夠(┬＿┬)火惊，我還是寫(xiě)如何實(shí)現(xiàn)的求类，比較好。
想要換主色調(diào)屹耐，其實(shí)就是換一種風(fēng)格樣式尸疆，最終都是換css。
我看目前比較流行的幾種切換主題的方式：
- 所有樣式的css模版都在項(xiàng)目中惶岭，根據(jù)條件寿弱，給body添加class，通過(guò)不同的class來(lái)顯示不同的樣式按灶。
- 通過(guò)引用不同的link文件症革，達(dá)到效果。
- ElementUI的這種方式鸯旁，詳情見(jiàn)ISSUE
（1） 先把默認(rèn)主題文件中涉及到顏色的 CSS 值替換成關(guān)鍵詞
（2） 根據(jù)用戶(hù)選擇的主題色生成一系列對(duì)應(yīng)的顏色值
（3） 把關(guān)鍵詞再換回剛剛生成的相應(yīng)的顏色值
（4） 直接在頁(yè)面上加 style 標(biāo)簽噪矛，把生成的樣式填進(jìn)去
我目前用的是第一種方式，把操作過(guò)程記錄下來(lái)铺罢，方便以后查看艇挨。
如何增加主題文件-具體操作過(guò)程
說(shuō)明：此項(xiàng)目UI是在elementUI基礎(chǔ)上建立的，所以韭赘，我們可以通過(guò)element提供的方法缩滨，來(lái)自定義主題。
生成自定義主題文件
使用工具下載自定義主題文件泉瞻，并命名為wq-variables.css脉漏。以后我們?nèi)绻胍黾又黝}文件，只需要修改變量文件中各個(gè)變量所對(duì)應(yīng)的值瓦灶。
編譯主題
我們利用工具來(lái)編譯主題鸠删。
在終端，將剛剛修改好的變量文件贼陶，通過(guò)命令node_modules/.bin/et -c wq-variables.css來(lái)編譯主題刃泡。
給自定義主題增加命名空間
默認(rèn)情況下巧娱，編譯的主題目錄會(huì)放在./theme下。由于烘贴，我們是通過(guò)改變css的命名空間來(lái)切換主題的禁添，那么，我們就需要為剛生成的主題增加命名空間桨踪。主題文件內(nèi)容很多老翘，如果手動(dòng)一個(gè)個(gè)添加命名空間，工作量巨大锻离，這個(gè)時(shí)候铺峭，可以使用另一個(gè)給css增加命名空間的工具。下載這個(gè)項(xiàng)目汽纠，然后只需要修改gulpfile.js文件中3處內(nèi)容卫键，就可以得到想要的內(nèi)容，這里注意虱朵，本項(xiàng)目css自定義的命名空間統(tǒng)一為custom-******,其中******建議使用主題色的16進(jìn)制編碼,也可以使用其他字符串莉炉，但是要和radio標(biāo)簽統(tǒng)一。
引用自定義主題
自定義主題文件碴犬，已經(jīng)有了絮宁，只剩下如何引入使用了。
- 在
App.vue中import新增的主題樣式（這個(gè)也可以寫(xiě)在topbar.vue文件中服协，到底哪種好些绍昂，我也不清楚） - 在
./src/components/nav/topbar/topbar.vue中，添加對(duì)應(yīng)的radio標(biāo)簽
經(jīng)過(guò)以上兩步蚯涮，就可以正常使用了治专。
如何處理與自定義主題不同部分的樣式
可以新建一個(gè)css文件，然后在其中編寫(xiě)樣式遭顶，之后在入口文件引入就ok了张峰。
具體效果，可查看于此網(wǎng)站：
http://weiqinl.com/vue-element-admin/
此做法參考于：
基于Element的動(dòng)態(tài)換膚
