vue 一键换肤（切换主题样式）

<style>
:root{
    --theme_bg_color:red
}
</style>

<style scoped>
    .myTitle{
        background: var(--theme_bg_color);
    }
</style>

changeTheme() {
    document.documentElement.style.setProperty("--theme_bg_color","green");
}

<div>
    <button @click="changeTheme">换肤</button>
    <div class="myTitle">你好</div>
</div>

.bg {
    background: green;
}

.bg {
    background: red;
}

mounted(){
    let link = document.createElement('link');
    link.type = 'text/css';
    link.id = "theme";
    link.rel = 'stylesheet';
    link.href = './css/theme_red.css';
    document.getElementsByTagName("head")[0].appendChild(link);
},

changeTheme(){
    document.getElementById('theme').href = './css/theme_green.css'
}

    <div>
        <button @click="changeTheme">换肤</button>
        <div class="bg">你好</div>
    </div>

.theme_red{
  .head{
    background: red;
  }
}
 
.theme_green{
  .head{
    background: green;
  }
}

// 全局主题样式
import './assets/styles/theme.scss'

mounted() {
    document.getElementById('app').setAttribute('class', 'theme_red')
},

changeTheme() {
    document.getElementById('app').setAttribute('class', 'theme_green')
}

<div>
    <button @click="changeTheme">换肤</button>
    <div class="head">你好</div>
</div>