產品需求是新增淺色和深色兩個配色切換，且記住使用者上次設定的顏色。

 前端是 elementUI做的，專案內已經添加了SCSS。

個人理解：通過使用者操作改變元素類名載入實現不同的樣式。控制顏色改變，如果這樣實現的話，不僅僅可以實現淺色和深色的配置。記住使用者上次設定可以使用LocalStorage儲存，在專案載入的時候去取，重新設定

於是上網搜尋了 案例，由於時間有點久。參考了不同的方案。找不到當初採用的方案了。現在給一個連結，基本是這個思路。

https://www.cnblogs.com/shaozhu520/p/12801131.html 請先理解這個思路。本方案是這個的擴充套件

前提是 vue 

   開始 style-variable-color 資料夾下建立兩個主題檔案配置 darkTheme.scss 和 lightTheme.scss  這兩個檔案內變數名一致。配色分別是淺色配色和深色配色

   我個人src下的style,是全域性樣式。variable檔案是 變數資料夾裡面儲存的是SCSS全域性變數 通過vueConfig配置到全域性中

接下來 在 themeColor.scss 將  darkTheme.scss 和 lightTheme.scss 引入，

這個檔案是顏色變數的混合（完成通過類名判斷載入顏色變數）。與連結方案中對比，我添加了傳入變數功能。通過傳參判斷需要css程式碼。減少程式碼量

 到此，配置功能完成了。接下來是互動實現

注意 ： js 元素的自定義屬性是以 data-開頭的 。所以我的自定義屬性叫 data-theme

最初，我的data-theme屬性是放到App.vue 的 app dom下的。因為按照我對vue的單頁面理解。vue檔案會編譯到這個下面的

但是elementUI的dialog有個屬性append-to-body 會導致有些dom元素在app 外部。所以這個屬性不能加在 app 上，掛載到bodys上是最保險的。

在App頁面 的created 的生命週期上通過js 動態給 body 新增data-theme屬性。在需要改變主題的地方重新設定快取和data-theme 屬性就可以實現了。

這樣dom 操作就完成了。最後就是在頁面寫css樣式了

在你的 .vue檔案的scss中直接呼叫這些混合即可。

到此。主題切換功能就實現了。 但是要實現產品需求這樣選擇框和彈出框也統一的樣式。勢必要修改elementUI樣式。