vue更換主題設置主題

 1、創建一個後綴爲.scss文件將下述代碼放進去。將scss文件引入main.js中(如果引入報錯可以網上搜一下，很多！)

:root {
    --bg_white_color: #fff;
    --bg_pink_color:pink;
    --bg_black_color:#373737;
    --bg_huiSe_color:#ccc;
    --bg_HongSe_color:#E02D30;
}

$bgWhiteColor: var(--bg_white_color); //白色。用var來盛放變量名
$bgPinkColor: var(--bg_pink_color); // 粉色。用var來盛放變量名
$bgBlackColor: var(--bg_black_color); //黑色。用var來盛放變量名
$bgHuiSeColor: var(--bg_huiSe_color); //灰色。用var來盛放變量名
$bgHongSeColor: var(--bg_HongSe_color); //主題紅色。用var來盛放變量名

2、在代碼中使用(在main.js引入後就不需要在每個vue單頁面中引入了，怎麼實現，網上也有很多)

background-color: $bgWhiteColor;

3、點擊的時候改變css變量的值，document.getElementsByTagName('body')[0].style.setProperty()改變的是css變量的值。

pinkThem(){//點擊事件
            document.getElementsByTagName('body')[0].style.setProperty('--bg_white_color','pink');
            document.getElementsByTagName('body')[0].style.setProperty('--bg_pink_color','pink');
            document.getElementsByTagName('body')[0].style.setProperty('--bg_black_color','pink');
        },