前言
背景 ：
1.專案中，需要通過一個後臺系統操作配色，為另一個系統實現配色； 2.專案開發使用的ui是elementUI。
目的 ：
使用elementUI實現系統的動態更改主題色。
功能分析
調研了vuetifyjs的主題色實現方案及elementUI官方實現的更換主題色的方案。把兩者結合到一起，實現我們系統需要的配色功能。
下面分別介紹一下兩者配色方案的實現：
vuetifyjs
首先，去看了它的線上主題色生成器，
接著，看了其實現配色的核心原始碼部分**，得出結論：核心css程式碼是動態生成的**。
程式碼分析：
流程如下：
第一步，初始化的時候，根據配置的主題色，生成主題色的css樣式
在vue的生命週期created階段：呼叫核心方法 genStyle()和applyTheme()；
genStyle方法：生成一個id="vuetify-theme-stylesheet"style標籤,並插入到dom結構中。
applyTheme方法：將主題色樣式放到id="vuetify-theme-stylesheet"的style標籤中。
可以看出，applyTheme（）方法依賴“generatedStyles”，
第二步：watch了“generatedStyles”，generatedStyles一旦發生改變，則會呼叫applyTheme()方法，將id為"vuetify-theme-stylesheet"的style標籤內容實現更換。
第三步：檢視generatedStyles這個計算屬性，可以看出其主要依賴parsedTheme這個計算屬性，而發生改變。
parsedTheme獲取的是主題色值；
當更改主題色的時候，parsedTheme發生改變； generatedStyles計算屬性就也會隨之改變，然後呼叫genBaseColor()方法（此方法主要就是生成style標籤裡面的內容） watch監測到“generatedStyles”發生了改變，就會呼叫applyTheme()，將“genBaseColor（）”方法生成的css放入到style標籤內，主色系就發生了變化。
看下面這個圖，基本上就是其依賴關係，及發生改變時的呼叫
elementUI動態換膚
Element官網提供了自定義主題的方案，同時也提供了一個線上自定義主題的demo
下面是demo實現動態換膚的思路：
下載了官網的Demo之後，進行了一些優化（適合我們專案）。
主要如下： 將樣式檔案放到本地；只保留涉及到顏色的樣式css。不需要全部的css（體力活，有點耗時）
優點：
1.不需要去請求element的樣式檔案；
2.第一次初始化的時候，系統就會很快的根據配色去替換調相應的顏色程式碼。 而不會讓使用者發現顏色的變化（藍色-->綠色），採用本地的方式替換，使用者看到的就是綠色。