vue+scss实现一键全局换肤功能_vue window.document

vue+scss实现一键全局换肤功能

需求：实现点击按钮，项目全局换肤

思路：

1. 利用window.document.documentElement.setAttribute('data-theme', 'dark')设置html的attribute属性
2. 利用scss的混入@mixin定义不同主题的样式表，然后在需要的文件中使用@include加载定义的样式

实现步骤：

1. 在App.vue中获取当前的主题，并且设置html的attribute ，当没有设置主题时默认设置一个主题，我这里是设置为dark

let theme = localStorage.getItem('theme')
    if(!theme || theme === 'dark'){
      window.document.documentElement.setAttribute('data-theme', 'dark')
    }else{
      window.document.documentElement.setAttribute('data-theme', 'bright')
    }
1
2
3
4
5
6

2. 新建文件mixin.scss，用来写不同主题的样式表

@mixin header_font_color{
  [data-theme="dark"] & {
   color:#8B8F9A
  }
  [data-theme="bright"] & {
    color:#484848
  }
}
1
2
3
4
5
6
7
8

以上css中 [ ] 可以识别到在html标签上设置的属性，所以在html上对应属性发生变化时，就会执行相应的样式，这一步有点类似于平时给div添加一个.active属性，css自动执行相应样式。

4. 使用不同样式表，在vue文件中引入mixin.scss文件，也可全局引入，然后使用@include引入之前定义的混入函数

.form-title{
        font-size: 18px;
        @include header_font_color() // 这里是引用混入函数
 }
1
2
3
4

5. 点击按钮换肤：重新设置html的attribute属性即可

 switchMode(mode) {
      if(!mode || mode === 'dark'){
        window.document.documentElement.setAttribute('data-theme', 'dark')
      }else{
        window.document.documentElement.setAttribute('data-theme', 'bright')
      }
    },
1
2
3
4
5
6
7

实现效果：

dark效果

bright效果