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);方法的顏色；