通过 scss 改变主题

1、设置主题

 window.document.documentElement.setAttribute("data-theme", theme); // 修改主题

2、创建放置主题色的_themes.scss文件

$themes: (
 surpass: ( 
          color-theme: #0188FB,
          color-hover: rgba(1,136,251,0.1),
  ),
 landscape: (
          color-theme: #1759F2,
          color-hover: rgba(23,89,242,0.1),
  )
);

3、 创建一个scss混入语法文件

@import './_themes.scss';

/*
  使用demo
  .app-home {
    font-size: 18px;
    @include themeify {
      color: themed('color-hover');
    };
    @include background_color("color-hover")
  }
*/

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;
    [data-theme=#{$theme-name}] & { //
      @content;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

@mixin background_color($color) {
  @include themeify {
    background-color: themed($color);
  }
}