pc页面切换皮肤

js代码 设置data-theme属性

切换时

// 切换主题
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);
      }
    }
  }
}