vue的一键换肤功能

由于项目是已经写好了的，需要突然加一个一键换肤的功能，切换黑白两个皮肤，但是最好不要大量改动代码…

1.sass+vue

这种方法需要安装一个插件，webpack-theme-color-replacer
由于项目是vue+elementui+less的，这个插件我只会了sass，一挪到less就不停报错，还没找到原因

2.setProperty() 方法

这种方法不需要安装插件。
document.documentElement.style 属性定义了当前浏览器支持的所有CSS属性。

第一步：在全局的less文件里写上

:root {
  --mainbgColor: #EAEAEC;
  --leftbgColor: #0D52B9;
  --titleColor: #286ACD;
}
@mainbgColor: var(--mainbgColor);
@leftbgColor: var(--leftbgColor);
@titleColor: var(--titleColor);

因为项目较大，定义变量方便使用和管理。

第二步：新建theme.js文件管理两个主题

//theme.js文件
black(){
document.documentElement.style.setProperty("--mainbgColor", "颜色");
  document.documentElement.style.setProperty("--leftbgColor", "颜色");
  document.documentElement.style.setProperty("--titleColor", "颜色");
}
white(){
document.documentElement.style.setProperty("--mainbgColor", "颜色");
  document.documentElement.style.setProperty("--leftbgColor", "颜色");
  document.documentElement.style.setProperty("--titleColor", "颜色");
}

就可以在项目中通过调用相应的变量进行一键换肤。