使用sass实现多主题切换

使用sass实现多主题切换

新建theme.scss文件

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
29
$thems: (  //定义主题颜色
    dark: (
        // 暗黑主题
       bGColor: #000,
        textColor: #fff,
        borderColor:#f0f,
      ),
  light: (
    // 默认主题
    bGColor: #0f0,
    textColor: #333,
    borderColor:#f59a23
  )

);
@mixin userTheme() {
    @each $key,$value in $thems{
        $currentTheme: $key !global;
        html[data-theme='#{$key}'] &{
            @content;
        }
    }
}
$currentTheme: light;
@function getVar($key){
     $themeMap:map-get($thems,$currentTheme);
     @return map-get($themeMap,$key);
}

引入并使用

1
2
3
4
5
6
7
8
9
@import "../views/thems.scss";
main{
   @include userTheme{
    background: getVar('bGColor');
   color: getVar('textColor');
    }
  
}
</style>

切换主题

1
document.documentElement.setAttribute('data-theme','主题名称') // 'light' 'dark'