网页换肤的N种方案

原文demo链接地址

网页换肤的N种方案

最近在做网站换肤的需求，也就是主题切换。那么如何切换主题的颜色呢？以下是网站换肤的实现以及基于换肤拓展的一些方案分享给大家，希望大家在做类似需求的时候能够有些参考。

覆盖样式实现

---

// light
$color-brand1: #ffcd32;
$fill-1: #fff !default;
$color-text: #3c3c3c;
$color-text-1: #757575;
$color-text-2: #222;

// dark
$dark-fill-1: #222 !default; // 品牌色
$dark-color-text: #fff;
$dark-color-text-1: rgba(255, 255, 255, 0.3);
$dark-color-text-2: $color-brand1;

// 页面使用
<style lang="scss">
@import "./assets/scss/index.scss";

[data-theme="dark"] {
   
  body {
   
    background: $dark-fill-1;
  }
  .reaconmend .reaconmend-list .item .name {
   
    color: $dark-color-text;
  }
  .reaconmend .reaconmend-list .item .desc {
   
    color: $dark-color-text-1;
  }
  .header .text {
   
    color: $dark-color-text-2;
  }
}
</style>

利用css优先级的原理覆盖掉原有样式的实现，每定义一套皮肤就要定义对应的sass变量，以及定义一套覆盖原有样式的皮肤样式。如果有多套皮肤的话，覆盖的代码量就会n套。 > 缺点

样式不易管理，查找样式复杂，开发效率低，拓展性差，维护成本高，多人协作沟通麻烦。

sass变量实现

---

// variable.scss  

// 浅色
$colors-light: (
  fill-1: #fff,
  text: #3c3c3c,
  text-1: #757575,
  text-2: #222,
);

// 深色
$colors-dark: (
  fill-1: #222,
  text: #fff,
  text-1: rgba(255, 255, 255, 0.3),
  text-2: #ffcd32,
);

// mixin.scss
// 背景色
@mixin bg-color($key) {
   
  background-color: map-get($colors-light, $key);
  [data-theme="dark"] & {
   
    background-color: map-get($colors-dark, $key);
  }
}
// text色
@mixin text-color($key) {
   
  color: map-get($colors-light, $key);
  [data-theme="dark"] & {
   
    color: map-get($colors-dark, $key);
  }
}

// 页面使用

<style lang="scss" rel="stylesheet/scss">
@import "../../../assets/scss/variable.scss";
@import "../../../assets/scss/mixin.scss";
.reaconmend-list {
   
    .list-title {
   
      height: 40px;
      line-height: 40 px;
      text-align: center;
        @include text-color(text-1);
    }
}
</style>

如上所示用到的知识点包含Sass变量（variable），嵌套（nestend rules），混合（mixins），
Sass Maps的函数-map-get($ma$