全网最详细官网一键换肤教程

一键换肤有两种方法可以
第一种是通过CSS3 filter(滤镜) 属性
在App.vue里面直接写上

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
1
2
3
4
5
6
7
8
9

直接这样 全网站就变成灰色了
如果想要通过后台控制原色跟灰色之间的切换,这个功能
将上面那段代码弄成一个css文件,通过动态引入css的方式进行控制

    onThemeChanged(d) {
      if (d == '灰色主题') {
        import("@/assets/css/gray.css");
      }
    },
1
2
3
4
5

写一个方法 通过接口调用的方式 看后端返回什么 如果返回的是灰色就用这个css引入 如果不是 就恢复原色彩
那如果不想要灰色主题呢 这种方法只适合灰色主题的时候使用,那要是红色喜庆主题呢就得用到下面这种方法了

用到了scss
首先要安装号scss
1.定义一个scss文件 定义想要变化的颜色和主题 可以是字体颜色 背景颜色 图片引入(引入不同颜色得图片)等等

// -------------------------------更换的系统主题颜色2（Standard）-----------------------------------//
// 菜单所有未选中文字样式
$menuTextStandard: #333333;
// 一级菜单样式
$menuBgStandard: #ffffff;
// 一级菜单鼠标悬浮
$menuHoverStandard: #f7f7f7;
// 一级菜单选中时文字样式
$subMenuActiveTextStandard: #82ba00;
// 选中背景：
$subMenuActiveBgStandard: #e6f1cc;
// -------------------------------更换的系统主题颜色3（StandardRed）-----------------------------------//
// 菜单所有未选中文字样式
$menuTextStandardRed: #red;
// 一级菜单样式
$menuBgStandardRed: #ffffff;
// 一级菜单鼠标悬浮
$menuHoverStandardRed: #f7f7f7;
// 一级菜单选中时文字样式
$subMenuActiveTextStandardRed: #911844;
// 选中背景：
$subMenuActiveBgStandardRed: #e9d1da;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.为需要切换的5个颜色在下面定义方法动态切换颜色：（注意部分样式要加 import 才会生效）

@mixin menuText($color) {
  color: $color;
 
  //   /*判断匹配*/
  [data-theme="standard"] & {
    color: $menuTextStandard;
  }
 
  [data-theme="standardRed"] & {
    color: $menuTextStandardRed;
  }
 
  [data-theme="standardSkyBlue"] & {
    color: $menuTextStandardSkyBlue;
  }
}
 
@mixin menuBg($color) {
  background-color: $color !important;
 
  //   /*判断匹配*/
  [data-theme="standard"] & {
    background-color: $menuBgStandard !important;
  }
 
  [data-theme="standardRed"] & {
    background-color: $menuBgStandardRed !important;
  }
 
  [data-theme="standardSkyBlue"] & {
    background-color: $menuBgStandardSkyBlue !important;
  }
}
 
@mixin menuHover($color) {
  background-color: $color;
 
  //   /*判断匹配*/
  [data-theme="standard"] & {
    background-color: $menuHoverStandard;
  }
 
  [data-theme="standardRed"] & {
    background-color: $menuHoverStandardRed;
  }
 
  [data-theme="standardSkyBlue"] & {
    background-color: $menuHoverStandardSkyBlue;
  }
}
 
@mixin subMenuActiveText($color) {
  color: $color !important;
 
  //   /*判断匹配*/
  [data-theme="standard"] & {
    color: $subMenuActiveTextStandard !important;
  }
 
  [data-theme="standardRed"] & {
    color: $subMenuActiveTextStandardRed !important;
  }
 
  [data-theme="standardSkyBlue"] & {
    color: $subMenuActiveTextStandardSkyBlue !important;
  }
}
 
@mixin subMenuActiveBg($color) {
  background-color: $color !important;
 
  //   /*判断匹配*/
  [data-theme="standard"] & {
    background-color: $subMenuActiveBgStandard !important;
  }
 
  [data-theme="standardRed"] & {
    background-color: $subMenuActiveBgStandardRed !important;
  }
 
  [data-theme="standardSkyBlue"] & {
    background-color: $subMenuActiveBgStandardSkyBlue !important;
  }
 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

这两段代码可以写到一个文件里面
3.在mian.js里面引入
'import './assets/styles/variables.scss
4.在所有页面需要变色的颜色上使用：

// color:#f7f7f7  改为：
@include menuText(); 
1
2

这个可以是字体颜色 背景颜色 更可以是背景图片之类的 不改变布局 只改变样式
5.App.vue 中一键全局更改主题颜色：

function setAttribute(theme) {
      window.document.documentElement.setAttribute("data-theme", theme);
 }
 setAttribute("standard");  // 应用主题2 
 setAttribute("standardRed");  // 应用主题3
1
2
3
4
5

这样的话就可以实现根据后台接口返回的内容实现页面样式切换了
文章参考：vue 结合scss实现前台主题颜色动态变化