1、原理

通过css3的自定义属性，在不同风格下改变css的自定义属性值，达到换肤的效果。

2、方案

换肤分为黑白两种风格。

（1）颜色变量定义

白色风格新增颜色变量文件/src/style/skin/white.js，文件内容定义需要换肤的颜色变量：

export default {
  '--COLOR1': '#fff',
  '--COLOR2': '#aaa',
  '--bg-color': 'var(-COLOR1)'
}

同理黑色风格新增颜色变量文件/src/style/skin/black.js。

（2）样式文件定义

新增样式文件/src/style/components/home.less：

.page{
  background-color: var(--bg-color);
}

（3）样式整合

新增文件/src/style/index.less：

// 自定义属性默认值，作用于全局
::root{ 
   --COLOR1: red,
   --COLOR2: blue,
   --bg-color: var(-COLOR1)
}
@import '../components/home.less';

（4）样式控制

// 根据不同风格引用不同颜色变量的js
let colors = require('../src/style/skin/' + skin + '.js' );
// 修改自定义属性
colors.forEach((value, key) => {
  document.documentElement.style.setProperty(key, value);
})

web端换肤功能-方案2