vue+scss動態改變主題顏色

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

2、在需要用到的頁面引入

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

3、調用

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

需要匹配什么顏色，就傳定義好的變量名

如何一鍵控制全局呢？

往下看

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

在app.vue（或者其他地方）寫入此方法，只需要在第二個參數位置傳入你所定義的變量名即可動態改變所有調用

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