首先能看官網描述就先看官網

跟著操作基本上你就可以獲得下圖的檔案

gulp-css-wrap工具的使用，可以看下文，筆者是照著模範的

基本能達到自己的目的：就是將多份不同的樣式，每個選擇器加上（.XXX）用於區分，因為我們後面將所有的樣式都引入到專案中。

上面連結中的有個位置需要注意，如下圖：

使用cmd輸入gulp出現類似“未知命令的錯誤”，此時只需要使用 -g全域性安裝即可。

例子中我們做這樣的測試：

element-variables.scss （前面官網的操作中會提到，務必先看官網）中修改如下位置，然後生成一份樣式

同理再生成一份，修改值為gred，最後形成如下圖所示

index.css如下圖所示，效果如下

注：fonts需要在下圖中拷貝過去

關於引入

//預設的，官網提供的樣式引入
// import 'element-ui/lib/theme-chalk/index.css';
//自定義的樣式，也就是我們修改後編譯出來的。
import '../theme/index.css'    注：效果已經出來了，引入的就是使用我們之前的那個修改green/red的檔案編譯後的樣式。簡單地說就是我們成功修改了樣式。

測試方法可以使用

<el-button type="primary">主要按鈕</el-button> 反正我使用該按鈕效果是出來了。

本文的重點來了：我們有了多份樣式檔案，我們每個樣式檔案裡的選擇器都加了區分，我們要使用者選擇使用哪個樣式

具體區分在例子中的體現是：

.custom-pbtn-green 與.custom-pbtn-red的區別

此時同時引入所有樣式檔案

import '@/assets/css/theme/PBtnRed/index.css'
import '@/assets/css/theme/PBtnGreen/index.css'

一個測試元件的<template>部分用於測試

<div  :class="[btnColorClass]">
  <span>{{btnColorClass}}</span>
  <el-button @click="changeColor('red')">紅色按鈕</el-button>
  <el-button @click="changeColor('green')">綠色按鈕</el-button>
  <el-button type="primary">主要按鈕</el-button>
</div>

點選不同的按鈕實現切換顏色，主要按鈕即是測試觀察的按鈕，紅色按鈕和綠色按鈕都是用於點選分別切換主要按鈕顏色對應的按鈕。

修改這個body的樣式，為其class新增.custom-pbtn-green 或者.custom-pbtn-red，試想當我們引入了多套樣式，如果此時body新增的.custom-pbtn-green,自行新增的選擇器為.custom-pbtn-green則可以選中，對應的樣式也就可以生效，那其他樣式（例子中的.custom-pbtn-red）則不能生效，那豈不是達到我們想要的效果了。

document.getElementsByTagName('body')[0].className ='XXXXXX'就可以達到我們想要的效果。

該程式碼需要寫在什麼地方值得考究，如果將程式碼寫在該部位，變數放在data（）{return {XXX:XXX}}中會出現，當初始值顏色設定好後，呼叫下面方法修改，並不會影響到dom，也就是該class值沒有在html中生效。此時你可能想到重新整理頁面，重新整理後，data中的該變數值又重新是初始值。

changeColor:function(color){

}

此時你可能想到我們將該class鍵值對（也就是 變數=.custom-pbtn-green‘’）存到第三方處，想想可能會想到存到vuex‘倉庫’中，所以程式碼如下：

computed:{
  btnColorClass:function () {
      return this.$store.state.themeColor
  }
},

使用計算屬性，使用store中的值。

changeColor:function(color){
  let _color='custom-pbtn-'+color
  console.log(_color)
  this.$store.commit("setThemeColor",_color)
}

通過點選監聽方法修改store中的變數值。

store程式碼如下所示：

import Vue from 'vue';
import Vuex from 'vuex';
import index from "../router";
Vue.use(Vuex);
const store = new Vuex.Store({  
  state:{
    themeColor:'custom-pbtn-red'
  },
  mutations:{
    setThemeColor(state,color){
      state.themeColor=color
    }
  }
})
export {store}

記得在main.js中引入

基本上，我們就可以通過vuex中儲存的hemeColor來存我們的字串.custom-pbtn-green 或者.custom-pbtn-red了，

理想很豐滿，顯示很骨感，此時啟動專案，執行發現可以通過點選紅色按鈕和綠色按鈕切換主要按鈕的顏色，好像很滿意，但是此時如果你重新整理頁面，vuex中的變數又回到初始值，也就是說我選擇了綠色作為主題，我無意中一重新整理頁面，主題又變成了紅色，強迫症會很反感，所以我們需要讓重新整理影響不到變數值。

所以在頁面建立前就要獲取到值，而且值儲存位置是不為重新整理所影響的。可以存本地也可以存伺服器，根據需求而定，主題跟機器就本地，主題更賬號就跟伺服器。

建議本地：可用技術localStorage、sessionStorage

下面是百度來的一小段

localStorage生命週期是永久，這意味著除非使用者顯示在瀏覽器提供的UI上清除localStorage資訊，否則這些資訊將永遠存在。

sessionStorage生命週期為當前視窗或標籤頁，一旦視窗或標籤頁被永久關閉了，那麼所有通過sessionStorage儲存的資料也就被清空了。

在此我找到一小段程式碼，修改後測試（程式碼使用sessionStorage）：

created(){
  //  頁面載入時讀取sessionStorage裡的狀態資訊
  if(sessionStorage.getItem("themeColor")){
    this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("themeColor"))))
  }
  //頁面重新整理時將vuex裡的資訊儲存到sessionStoreage裡
  window.addEventListener("beforeunload",()=>{
    sessionStorage.setItem('themeColor',JSON.stringify(this.$store.state))
  })
}

注：vue的生命週期、鉤子函式等等是必須要理解的，

下面是我看過的一篇文章，可以參考下

並加入修改後重新整理頁面

//切記不能使用（）=》{}不然就是commit is not defined  我測試期間出現的錯，自行判斷，筆者暫時還不理解
changeColor:function(color){
  let _color='custom-pbtn-'+color
  console.log(_color)
  this.$store.commit("setThemeColor",_color)

  this.$router.go(0)
}

現在的效果就是，修改主題後重新整理頁面不該變主題，還是自己修改的那個主題，但是關閉頁面就回到預設主題。

前面的文字只是為了顯示觀察罷了。

到現在，該說的都說了，這就是我對element自定義主題以及主題修改的理解，參考了很多資料，也算是有些收穫，希望給讀者帶來一些幫助。