主题切换大概想到以及找到的有以下几种方式：
- DWZ富客户端框架主题切换功能
实现方式：
- 将不同主题的样式抽取出来。
- 生成多份不同的主题样式文件。
- 动态引入。
// theme1.css
.mod {
color: red;
}
// theme2.css
.mod {
color: green;
}
// theme3.css
.mod {
color: blue;
}
DWZ富客户端框架主题切换
弊端：需要同时维护多份主题文件。
-
饿了么换肤功能
实现方式：- 先把默认主题文件中涉及到颜色的 CSS 值替换成关键词：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L250-L274
- 根据用户选择的主题色生成一系列对应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/formula.json
- 把关键词再换回刚刚生成的相应的颜色值：https://github.com/ElementUI/theme-preview/blob/master/src/utils/color.js
- 直接在页面上加
style标签，把生成的样式填进去：https://github.com/ElementUI/theme-preview/blob/master/src/app.vue#L198-L211
饿了么这种实现方式严格来说只能算换肤，因为只是改变了皮肤颜色。而且全局替换颜色变量是比较暴力的一种方式。对于大型项目不建议采用。
考虑目前项目的实际情况：
目前这个项目是个页面比较多的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
),
);
这里包含三个主题red，green，blue。每个主题内的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;
}
运行结果：
运行结果
参考资料：
