vue + css-vars-ponyfill 实现动态换肤

vue + css-vars-ponyfill 实现动态换肤

npm install -s css-vars-ponyfill
1

新建theme.js文件

// 引入 字体变量插件
import cssVars from 'css-vars-ponyfill';

const baseSize = { '--font-size-large-x': '22px', '--font-size-large': '18px', '--font-size-medium': '14px', '--font-size-medium-x': '16px', '--font-size-small-s': '10px', '--font-size-small': '12px', };

export const themeOptions = {
  // 深色
  dark: {
    ...baseSize,
    '--color1': '#fff',
    '--bg1': '#222'
  },
  // 浅色
  light: {
    ...baseSize,
    '--color1': '#ff758c',
    '--bg1': '#667eea'
  }
};
/**
 * @param {*} theme 指定换肤的key
 */
export const initTheme = (theme) => {
  document.documentElement.setAttribute('data-theme', theme ? 'light' : 'dark');
  cssVars({
    watch: true,
    // variables 自定义属性名/值对的集合
    variables: themeOptions[theme],
    // 当添加，删除或修改其<link>或<style>元素的禁用或href属性时，ponyfill将自行调用
    onlyLegacy: false, // false 默认将css变量编译为浏览器识别的css样式 true 当浏览器不支持css变量的时候将css变量编译为识别的css
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

main.js 初始化引入

// 引入刚才的js文件
import { initTheme, themeOptions } from 'config/theme';
// key 选择初始化加载默认的主体
initTheme('dark');
Vue.prototype.$initTheme = initTheme;
Vue.prototype.$themeOptions = themeOptions;
1
2
3
4
5
6

css使用 css属性var(–加上themeOptions自定义的key)

<style lang="scss">
#nav-bar {
  color: var(--color1); 
  background: var(--bg1);
}
</style>
1
2
3
4
5
6

动态换肤

<button @click="switchTheme(item)" v-for="item in Object.keys($themeOptions)" :key="item">{{item}}</button>

//methods
// $initTheme是我在main.js定义的$initTheme
switchTheme(theme) {
      this.$initTheme(theme);
    }
1
2
3
4
5
6
7

这样就可以实现动态换肤了，只需要更改我们的配置项就可以了