Scss换肤功能_scss 换肤

利用Scss实现自定义换肤功能

1.自定义数值

这样设置后,可实现切换至任意颜色
scss文件中设置变量
页面设置则将切换的值赋值给变量

scss文件中
:root {
  --label-font-color: rgb(0, 255, 21);
  --label-font--bkcolor: rgb(0, 255, 21);
}
1
2
3
4
5

页面中使用
const custom=document.getElementsByTagName('body')[0].style;
custom.setProperty('--label-font-color', 'orange');
custom.setProperty('--label-font-bkcolor', 'orange');
1
2
3
4

2.默认皮肤

定义两套主题, 如日间和暗夜模式

$light: (
  bk: rgb(235, 235, 235),
  ziti: rgb(243, 0, 0),
  --label-font-color: red
);
$dark: (
  bk: rgb(90, 90, 90),
  ziti: rgb(255, 255, 255),
  --label-font-color: rgb(0, 255, 21)
);

@mixin theme($theme) {
  div {
    color: map-get($theme, ziti);
  }
  .header {
    color: map-get($theme, --label-font-color);
    background: map-get($theme, bk);
  }
}

.light {
  @include theme($light);
}

.dark {
  @include theme($dark);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

页面中使用

//查询当前主题
const classVal = document.getElementById('app-theme').getAttribute('class');
//替换当前主题
document.getElementById('app-theme').setAttribute('class', 'dark');
1
2
3
4

我们将主题变量以Map对象的方式储存，每个对象内有相同的key；
通过@mixin定义一个可重复使用的样式，将主题Map对象作为参数传递；
通过map-get(map,key)方法，取出对应主题Map对象的值；
通过@include为各个主题class命名空间使用定义样式并传递主题变量