vue2.x项目 通过theme-chalk-preview实现动态换肤

【背景需求】项目需支持用户自定义主题颜色并缓存颜色

【技术实现】（插件） [email protected]、[email protected]、[email protected]、[email protected]

-------------- Test.vue ---------------

-------------- @/utils/color.js ---------------

import color from 'css-color-function'
import formula from './formula.json'

const generateColors = primary => {
  let colors = {}

  Object.keys(formula).forEach(key => {
    const value = formula[key].replace(/primary/g, primary)
    colors[key] = color.convert(value)
  })
  return colors
}

export default generateColors

-------------- ./formula.json -----------

{
  "shade-1": "color(primary shade(10%))",
  "light-1": "color(primary tint(10%))",
  "light-2": "color(primary tint(20%))",
  "light-3": "color(primary tint(30%))",
  "light-4": "color(primary tint(40%))",
  "light-5": "color(primary tint(50%))",
  "light-6": "color(primary tint(60%))",
  "light-7": "color(primary tint(70%))",
  "light-8": "color(primary tint(80%))",
  "light-9": "color(primary tint(90%))"
}

--------------- 换主题色代码结束线 --------------

【备注】 以上会改变element-ui涉及到的元素的主题颜色，如果有一些元素是个人在页面新建的，比如某些文字、自定义按钮需要动态变色的话，需要以下技术实现：

在index.scss里 写入以下代码 ：
 :root {
    --color-primary: #409eff;  //--color-primary  ：全局主题色变量
}
$varColor: var(--color-primary);  //用var盛放颜色变量，供于js里改变此变量使用

在改变颜色的function里改变颜色变量值：
document.getElementsByTagName('body')[0].style.setProperty('--color-primary', this.colors.primary); //(上面的Test.vue已包含此句)

【over】帮助到的点个赞呗