vue+element-ui实现一键切换皮肤

element-ui可以自己定义主题并下载，选择好自己想要的主题，下载到本地。我下载了一套暗黑模式，一套默认的用来白天黑夜模式切换。
文件目录如下：

在项目的index.html文件中：

在sideBar.vue页面中，新增下拉框选择模式：

    
      
        
      
      
        dark
        light
      
    

定义方法：

  methods:{
    tabTheme(val){
      let theme = this.$baseUrl + `static/themes/${val}/theme/index.css`;
      document.getElementById("theme").setAttribute("href",theme);
      this.$store.commit('themes/CHANGE_THEME',val)//把主题色放到vuex中，这里改变，同时响应式app.vue类改变，使用localStorage会发生在App.vue文件中不能响应式改变class类名问题。
      	
    }

  },

store中新增themes.js文件：

export default {
    namespaced:true,
    state:{
        theme:'light',
    },
    actions:{

    },
    mutations:{
        CHANGE_THEME(state,data){
            state.theme = data;
        },
    }
}

在App.vue文件中：

  

    
  

export default {
  computed: {
    key() {
      return this.$route.path + Math.random()
    },
    theme(){
      return this.$store.state.themes.theme;//响应式改变
    },
  },
  created(){
    let theme = this.$store.state.themes.theme;
    if(theme){
      document.getElementById("theme").setAttribute("href",this.$baseUrl + `static/themes/${theme}/theme/index.css`);
    }
  },
}

这里亲测可以实现，但是页面中还有一些需要自己定义样式覆盖的，需要根据当前的类型，分别书写不同的样式：
新增variable.scss：定义主题色：

$primary:(dark:#303133,light:#ffffff);

新增baseSet.scss使用@each 遍历：

@import './variable.scss';

@each $key,$value in $primary {
    .theme-#{$key} {
        background-color: $value;
    }
}

然后把 baseSet.scss 引入 App.vue文件中：

  @import '../public/static/css/baseSet.scss';

至此完美实现，本地测试没有问题。

参考文章https://www.jianshu.com/p/199f450e1001，根据文章自己实现了一遍