使用Sass实现主题切换

主题切换大概想到以及找到的有以下几种方式:

实现方式:

  1. 将不同主题的样式抽取出来。
  2. 生成多份不同的主题样式文件。
  3. 动态引入。
//  theme1.css
.mod {
  color: red;
}

//  theme2.css
.mod {
  color: green;
}

//  theme3.css
.mod {
  color: blue;
}
DWZ富客户端框架主题切换

弊端:需要同时维护多份主题文件。

饿了么这种实现方式严格来说只能算换肤,因为只是改变了皮肤颜色。而且全局替换颜色变量是比较暴力的一种方式。对于大型项目不建议采用。

考虑目前项目的实际情况:
目前这个项目是个页面比较多的SPA,大概七八十个页面。按业务需求需要大概2-4个主题,主题数量比较少。

我需要的主题切换方式是不同主题的样式代码打包在一起,通过应用不同主题的class来实现主题切换。
这个class可以加在body或者根组件上,也可以添加在具体的元素或者小模块上。
对应如下两种样式:

.theme-class .component {
  /* Style for the component when child of `.theme-class` */
}

.component.theme-class {
  /* Style for the component when has `.theme-class` */
}

这里个人比较倾向第一种方式,所以我们期望的包含主题的样式格式应该类似如下:

.theme1 .component {
  ...
}

.theme2 .component {
  ...
}

.theme3 .component {
  ...
}

然而如果是上面这种形式的话,又是需要维护三份样式。所幸的是我们可以使用Sass来做这件事。(Less或者其他的样式预处理工具也可以做到同样的事情,只是变量作用域稍微有些不一样)

以Vue为例:

<template>
  <div class="app-root" :class="themeClass">
    <div class="app-container">
      <p>{{ msg }}</p> 
      <select v-model="theme">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'Dynamic Themes',
      theme: 'red'
    }
  },
  computed: {
    themeClass() {
      return `theme-${this.theme}`;
    }
  }
}

这里通过一个下拉框应用不同主题。

首先我们把主题变量抽取出来。

$themes: (
  red: (
    font-color: red,
  ),
  green: (
    font-color: green 
  ),
  blue: (
    font-color: blue
  ),
);

这里包含三个主题redgreenblue。每个主题内的font-color变量对应不同的值。

然后我们写一个主题化的mixin,包括一个themed函数。

@mixin themify($themes: $themes) {
  @each $theme-name, $map in $themes {

    .theme-#{$theme-name} & {
      $theme-map: () !global;
      @each $key, $value in $map {
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }

      @content;

      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

这段代码的功能主要是对需要主题化的地方,对样式根据不同主题的变量进行替换,然后复制一份样式代码。
使用方式如下:

<style lang="scss" scoped>
@import './styles/theming';
.app-container {
  @include themify($themes) {
    color: themed('font-color');
  }
}
</style>

需要注意的是,themed函数一定要在themify mixin内使用,因为themed内使用了$theme-map变量。

最后生成的样式如下:

.theme-red .app-container[data-v-7ba5bd90] {
  color: red;
}
.theme-green .app-container[data-v-7ba5bd90] {
  color: green;
}
.theme-blue .app-container[data-v-7ba5bd90] {
  color: blue;
}

运行结果:


运行结果

参考资料:

推荐阅读更多精彩内容