博客

需求：点击之后实现全局换肤

1、有一些页面和与之有相对应的样式，样式要写在一起放到public下的static下的css文件中，此外static下还有两个文件夹用来实现换肤分别是sass和scss。sass下写一个_handle.scss,scss下写一个_themes.scss。

2、_handle.scss

@import "../../../public/static/scss/_themes.scss";

//遍历主题map
@mixin themeify {
@each $theme-name, $theme-map in $themes {
//!global 把局部变量强升为全局变量
$theme-map: $theme-map !global;
//判断html的data-theme的属性值  #{}是sass的插值表达式
//& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
[data-theme="#{$theme-name}"] & {
@content;
}
}
}

//声明一个根据Key获取颜色的function
@function themed($key) {
@return map-get($theme-map, $key);
}
//下面是一些例子
//获取字体颜色
@mixin font_color($color) {//font_color是_themes.scss里自定义的名称
@include themeify {
color: themed($color)!important;
}
}

//获取边框颜色
@mixin border_color($color) {
@include themeify {
border-color: themed($color)!important;
}
}

//获取背景颜色
@mixin background_color($color) {
@include themeify {
background-color: themed($color)!important;
}
}
//获取中间bg背景图
  @mixin background_imagebody-box($image) {
  @include themeify {
  background-image: themed($image)!important;
  }
  }

3、_themes.scss

//当HTML的data-theme为dark时，样式引用dark
//data-theme为其他值时，就采用组件库的默认样式
//这里我只定义了两套主题方案，想要再多只需在`$themes`里加就行了
//注意一点是，每套配色方案里的key可以自定义但必须一致，不然就会混乱

$themes: (
  light: (
//例子，background_colorbg是自定义的，且名称唯一
     background_color: rgba(241, 240, 254, 1),
     background_colorbg: #F1F0FE,
    ),
    dark(
      background_color: rgba(2, 14, 32),
      background_colorbg: rgba(2, 14, 32),
    ),
)

4、css文件内要在顶部引用_handle.scss+如何使用

  @import "./public/static/sass/_handle.scss";
//在需要的地方使用
//font-color就是在前面两个css文件中定义好的，这三个名称要一致
.test{
  @include font-color("font_colormx-2");
}
  

5、换肤的点击事件

return{
        themetype: 'dark',
}
 /*点击改变主题样式*/
      change(theme) {
        if (this.themetype == 'dark') {
          document.documentElement.setAttribute("data-theme", 'light');
          this.themetype = 'light'
          console.log('改变为白色主题')
        } else {
          document.documentElement.setAttribute("data-theme", 'dark');
          this.themetype = 'dark'
          console.log('改变为深色主题')
        }
//缓存（下面这三行不是必加内容）
        // sessionStorage.setItem('setThemetype', this.themetype);//ok
        //后 ----加入你所需的key和value值
        this.resetSetItem('setThemetype', this.themetype);
      },

6、APP.vue

created() {
      let theme = localStorage.getItem('theme')
      if (!theme || theme === 'dark') {
        window.document.documentElement.setAttribute('data-theme', 'dark')
      } else {
        window.document.documentElement.setAttribute('data-theme', 'light')
      }
    },