pc页面切换皮肤

js代码 设置data-theme属性

<script>
      window.setTheme = function(theme) {
        document.documentElement.setAttribute('data-theme', theme)
      }
      let theme = localStorage.getItem('theme') || 'theme-blue'
      window.setTheme(theme)
</script>

切换时

// 切换主题
changeTheme(value) {
      window.setTheme(value)
      localStorage.setItem('theme', value)
}

css 代码

/*
* theme.scss
*/
// 经典蓝
$theme-blue: (
        primary-color: #3AAAFB,
        primary-color-s: #0D89E2,
        primary-color-l: #0d89e280
);
// 蓝莓黑
$theme-black: (
        primary-color: #2c3d61,
        primary-color-s: #273554,
        primary-color-l: #27355480
);
$theme-green: (
        primary-color: #00b791,
        primary-color-s: #5adf96,
        primary-color-l: #30ba85
);
// 定义映射集合
$themes: (
        theme-blue: $theme-blue,
        theme-black: $theme-black,
        theme-green: $theme-green
);

/*
  $type(String): 颜色类型，可选值 primary-color, primary-color-s, primary-color-l
  $bg-color(Boolean): 背景色使用主题色
  $font-color(Boolean): 文字颜色使用主题色
  $border-color(Boolean): 边框颜色使用主题色
*/
@mixin theme-color($type, $bg-color: false, $font-color: false, $border-color: false) {
  @each $themename , $theme in $themes {
    [data-theme = '#{$themename}'] & {
      @if $bg-color == true {
        background: map-get($theme, $type);
      }
      @if $font-color == true {
        color: map-get($theme, $type)
      }
      @if $border-color == true {
        border-color: map-get($theme, $type);
      }
    }
  }
}