vue项目皮肤切换方案

vue项目有换肤的需求，那么如何换肤呢。一般是准备两份黑白版UI设计色调。采用 CSS var()函数自定义变量属性调用。 定义一个名为 "--background" 的属性，然后使用 var(--background) 函数调用该属性。思路就是， 切换皮肤时，切换不同的不同皮肤的自定义属性值。默认黑色背景，每次切换皮肤，存储本地存储，刷新后皮肤保持一致。

1、theme.less

theme-b.less

:root {
  --background: #000;
}

theme-w.less

:root.white{
  --background: #fff;
}

theme.less

@import "theme-b.less";
@import "them