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