vue更换主题

vue中全局定义css变量

1、在App.vue中定义变量

:root{
    --theme_color: red;
    --fontSize: 12px;
}

注：在使用中不生效就把scoped去掉

2、在组件中使用变量

.header{
    height: 70px;
    background: var(--theme_color);
    font-size: var(--fontSize);
}

3、修改变量， 达到换肤的效果（因为变量在App.vue组件中， 修改变量也是在App.vue中）

document.documentElement.style.setProperty("--theme_color", 'blue');
document.documentElement.style.setProperty("--fontSize", '22px');

4、获取变量的值

console.log( document.documentElement.style.getPropertyValue("--theme_color") )