通过 scss 改变主题

最新推荐文章于 2024-04-25 23:35:36 发布

相忘于江湖426543

最新推荐文章于 2024-04-25 23:35:36 发布

阅读量511

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_42014441/article/details/114382361

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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);
  }
}