vue 一键换肤

App.vue

 <div id="app" :class="themeType">
  <router-view/>
</div>
data() {
    return {
      themeType: null
    }
  },
  created () {
    this.themeType = localStorage.getItem('themeType') || 'dark'
  },
  
  
<style lang="less">
    @import "@/themeDark";
    @import "@/themeLight";
</style>

demo.vue

data(){
    return{
        themeType:'dark',
    }
},
created () {
   this.themeType = localStorage.getItem('themeType') || 'dark'
},
methods:{
    updateTheme() {
      document.getElementById('app').classList.remove(this.themeType)
      this.themeType = this.themeType == 'dark' ? 'light' : 'dark'
      localStorage.setItem('themeType', this.themeType)
      document.getElementById('app').classList.add(this.themeType)
    }
}

themeDark.less

#app.dark {
  @copyTextBtnBorderTopColor: #ccc;
  @clearRecordBgColor: #F3F4F8;
  .abc{
      color:#fff
  }
}

themeLight.less

#app.light {
  @copyTextBtnBorderTopColor: #ccc;
  @clearRecordBgColor: #F3F4F8;
  .abc{
      color:#fff
  }
}