vue+scss动态改变主题颜色

一、新建.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;
　　 }
}

二、在须要用到的页面引入

@import "@/assets/scss/color.scss";    

三、调用

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

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

如何一键控制全局呢？

往下看

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

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

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