vue动态改变主题颜色_springboot vue 预警数据动态选择颜色变化

新建.scss后缀公用文件，放在assets或者其他地方都可以

/*需要切换的颜色变量*/
$color-primary1:#1776E1; /* 更换的颜色 */
$color-primary2:#3588CB; /* 更换的颜色 */
$color-primary3:#7D0000; /* 更换的颜色 */
$color-primary4:#EB6100; /* 更换的颜色 */

/*定义方法*/
@mixin color_primary($color){
    color:$color;
    /*判断匹配*/
    [data-theme="primary1"] & {
        color:$color-primary1;
    }
    [data-theme="primary2"] & {
        color:$color-primary2;
    }
    [data-theme="primary3"] & {
        color:$color-primary3;　　 }　　 [data-theme="primary4"] & {   　　　　 color:$color-primary4;　　 }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在需要用到的页面引入

调用

 p {
      // color: #055caa;
      @include color_primary($color-primary1);
 }
1
2
3
4

需要匹配什么颜色，就传定义好的变量名

如何一键控制全局

window.document.documentElement.setAttribute('data-theme', 'primary4');
1

在app.vue（或者其他地方）写入此方法，只需要在第二个参数位置传入你所定义的变量名即可动态改变所有调用

@include color_primary($color-primary1);方法的颜色；
1