css変数テーマ色+VUEXシステムテーマの肌交換を実現

ユーザーにn個のオプションテーマ色を指定して色を選択した後、システムアイコン、サイドバーなどの場所全体の色を交換します.
ここでは主にcssの変数を用いてvuexが伝達するユーザが選択した色と組み合わせて任意のラベルのcssに値を付けることができる.
(最初はvuexのみを使用して選択した色を格納し、直接ラベルに値を割り当てる方法で設定したのは、elementui上の行内スタイルの色効果だけがhover色を上書きしますが、行内にhoverを設定することはできません.pass)
(css変数:--xxxで変数を定義varでこの変数を使用)
皆さんが使ったらいいね~
vuexでテーマ色の初期値を指定

  state: {
    //    
    personality: "#fff",
    themeColor: "--themeColor:#fff"
  },
  getters: {
    //       
    getpersonality: statr => {
      return state.personality;
    }
  },
  mutations: {
    addcount(state, color) {
      console.log(state, color);
      state.personality = color;
      state.themeColor = "--themeColor:" + color;
    }
  },

ユーザーが色を選択するページmethodsの増加方法で選択した色の保存値をvuexに取得します

   changeColor(index) {
    //        
    this.colorIndex = index;
    const colorMap = {
      1: ["#ffffff", "#ffffff"],
      2: ["#1890ff", "#1890ff"],
      3: ["#222222", "#222222"],
      4: ["#5d44fb", "#5d44fb"],
    };
    this.setColor(...colorMap[index]);
  },
  setColor(color1, color2) {
    this.$store.commit("addcount", color1);
    localStorage.setItem("personality", color2);
  },

グローバルなbodyにvuexに格納されている色を割り当てる(vueの最外層#appラベルまたはel-container)

最後に任意のページのcssで直接この変数を使うことができます

/deep/ .save-btn {
  background: var(--themeColor);
  border-color: var(--themeColor);
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  color: #fff;
  margin-top: 40px;
  margin-left: 85px;
}