项目要求通过js来控制进行一键换肤，例如把#ffffff改成#000000的颜色等，通过一系列的方法对比，结出比较合适的方案是：通过ocument.body.style.setProperty方法来给body上添加变量，在css中应用变量，然后在js中控制变量的。例如:'--color1a" 是为了解决变量中有透明度要求的问题。
此方法优势有：不需要引用插件，使用原生js, css使用var函数, 兼容性强。
在css中使用如下：
color: var(--color1);
background: rgba(var(--color1a),.5);
js方法如下：
let theme1 = {
"--color1": "#FFFFFF",
"--color2": "#DBDBDB",
"--color3": "#ACACAC",
"--color1a": "255,255,255",
"--color2a": "219,219,219",
"--color3a": "172,172,172",
}
let theme2 = {
"--color1": "#000000",
"--color2": "#262626",
"--color3": "#595959",
"--color1a": "0,0,0",
"--color2a": "38,38,38",
"--color3a": "38,38,38",
}
// css使用时 color: var(--color1); background: rgba(var(--color1a),.5);
//修改样式
export function sendTheme (theme) {
let res = {
if (theme == 'theme2') {
res = theme2
} else {
res = theme1
}
Object.keys(res).map((key) => {
document.body.style.setProperty(key, res[key]);
})
}
