less/scss主题切换

1、实现原理

给内容最外层标签添加不同的主题class，用以区分不同的主题

2、less写法

.module-theme(@theme, @tag) {
  .m-title-box {
    background: @theme;
  }
  .m-head .m-info .m-name {
    color: @theme;
  }
  // 其他样式也如此
}
.theme-orange {
  @theme: #f9a51b;
  @tag: #fecc4e;
  .module-theme(@theme, @tag);
}
.theme-sky-blue {
  @theme: #6fa4d7;
  @tag: #93bde5;
  .module-theme(@theme, @tag);
}

3、scss写法

$themes: (
  theme-orange: (
    theme: #f9a51b,
    tag: #fecc4e
  ),
  theme-sky-blue: (
    theme: #6fa4d7,
    tag: #93bde5
  )
);
@each $theme, $config in $themes {
  .#{$theme} {
    .m-title-box {
      background: map-get($config, 'theme');
    }
    .m-head .m-info .m-name {
      color: map-get($config, 'theme');
    }
    // 其他样式也是如此
  }
}

4、使用，传入主题名，给最外层标签使用对应的主题class

document.getElementById("theme").setAttribute("class", "theme-" + theme);