前端换肤

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

1、纯css方式，写两套

换肤.png

//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"

    


// 点击换肤
红色
蓝色
绿色
//js

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