前端换肤

我的主要方式写两套css，点击替换css

1、纯css方式，写两套

换肤.png

<link id="theme-link" type="text/css" rel="stylesheet" href="theme/night-theme.css">
//js

let themeId = document.getElementById('theme-link');
themeId.setAttribute('href','theme/day-theme.css');

2、用预处理器（也是相当于写多套css）

我用的是scss,主要是通过改变类名的方式

//主要的scss 主题文件
@mixin theme-mixin($backcolor){
  .theme-background{
    background-color: $backcolor;
  }
}
.themea{
  @include theme-mixin(red);
}
.themeb{
  @include theme-mixin(blue);
}
.themec{
  @include theme-mixin(green);
}

//最外层  主要是这个 class="themea"
<div id="app" class="themea">
    <router-view></router-view>
</div>

// 点击换肤
<el-button  @click="changeTheme('a')">红色</el-button>
<el-button  @click="changeTheme('b')">蓝色</el-button>
<el-button  @click="changeTheme('c')">绿色</el-button>
//js

changeTheme(themeNumber){
    document.getElementById('app').className ='theme'+themeNumber ;
}