vue+iview 实现项目中一件切换主题

<Button @click="changetheme(0,$event)" type="primary">主题</Button>
<Button @click="changetheme(1,$event)" type="primary">主题</Button>
<Button @click="changetheme(2,$event)" type="primary">主题</Button>

const colorList = ['default','red','green']; //全局变量
Window.themeColor=colorList[0];       //写入Window对象

changetheme(colortype,e){
    e.stopPropagation();
    localStorage.setItem('themeColor',colortype);    //保存使用主题色
    document.body.classList.remove(window.cssStyle); //去除已有主题色
    window.cssStyle=colorList[Number(colortype)];    //获取新的主题色
    document.body.classList.add(window.cssStyle);    //body添加主题色的class

    let themeColor = localStorage.getItem('themeColor'); // 判断是否已存在使用的皮肤
    if (themeColor) {
        window.cssStyle=colorList[Number(themeColor)];
    }else {
       localStorage.setItem('themeColor','0');  // 不存在则储存一个默认的主题色
    }
    document.body.classList.add(window.cssStyle);  //body 添加less中主题色的class
},

引入资源

<style lang="less" scoped>

@import '../theme.less';

<style>

主题文件

//theme.less 文件

@theme-color : #226CDC; //默认主题色
@red-theme-color:#fe2419;
@green-theme-color:green;
.header-style(@theme-color:@red-theme-color){  // less函数
  button {
    background: @theme-color;
  }
}
//调用函数生成相应的样式
.header-style();  // 默认主题色
 
.red{   // 这里需要单独添加一个class 用来换肤                           
    .header-style(@red-theme-color); // 红色
    button.ivu-btn-primary{
      background: @theme-color;
    }
  }
 
.green{
    .header-style(@green-theme-color); //绿色
    button.ivu-btn-primary{
      background: @green-theme-color;
    }
  }