vue 一键换肤

思路，可以运用element 内的组件配合css样式
操作：页面中只需要添加一键换肤的操作时间进行配色即可。一般就是两种颜色，默认色和改变色，我的需求是改背景色，不改字体色，因为字体的色值颜色太多。我用了本地存储localStorage加store。

如果需要透明度，注意的是要给所有的组件背景色初始值 透明度 background: rgba(255, 255, 255, 0.05)， 这个设置一般是在全局的css样式李设置，具体就要自己去元素李点击查看了;
不需要可以忽略。

 <el-button type="info" plain @click="changeSkin">一键换肤</el-button>

 定义一个初始色
   data () {
    return {
      themeColor: '#061729'
    }
  },
 然后时间中进行更改存值即可
 changeSkin () {
  if (this.themeColor === '#061729') {
    this.themeColor = '#031E3C' // 切换到新主题
    this.$store.commit('setThemeBackgroundColor', this.themeColor)
  } else {
    this.themeColor = '#061729' // 切换到原主题
    this.$store.commit('setThemeBackgroundColor', this.themeColor)
  }
  window.localStorage.setItem('theme', this.themeColor) // 保存当前主题色到localStorage
  // this.visible = !this.visible
},

在需要的页面进行计算属性

  computed: {
    currentComponentBackgroundColor () {
      return this.themeColor
    }
  },

页面渲染

<div class="header-container" :style="{background: currentComponentBackgroundColor}"></div>

在store 中存储

const state = {
  themeBackgroundColor:  window.localStorage.getItem('theme') // '#061729' // 默认主背景色
}

const mutations = {
  setThemeBackgroundColor (state, color) {
    state.themeBackgroundColor = color
  }
}
即可。