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');
        },