vue + sass 实现切换主题色

页面的结果如下，点击不同颜色的按钮改变头部和底部的背景色

// variable.scss 文件
// 背景色
$background-color-theme: #3f8e4d;
$background-color-theme1: red;
$background-color-theme2: #652BF5;
$background-color-theme3: deepskyblue;
// 字体色
$font-color-theme3 : #3f8e4d;
$font-color-theme2 : red;
$font-color-theme1 : #652BF5;
$font-color-theme : deepskyblue;

// mixin.scss 文件
@charset "utf-8";
@import "./variable";/*引入变量*/

// 根据data-theme的属性值添加对应的颜色
@mixin font_color($color){
 color:$color;
 [data-theme="theme1"] & {
 color:$font-color-theme1;
 }
 [data-theme="theme2"] & {
 color:$font-color-theme2;
 }
 [data-theme="theme3"] & {
 color:$font-color-theme3;
 }
}

@mixin bg_color($color){
 background-color:$color;
 [data-theme="theme1"] & {
 background-color:$background-color-theme1;
 }
 [data-theme="theme2"] & {
 background-color:$background-color-theme2;
 }
 [data-theme="theme3"] & {
 background-color:$background-color-theme3;
 }
}

// home.vue 页面
<div class="container">
  <my-header></my-header>
  <p @click="changeTheme('theme1')"></p>
  <p @click="changeTheme('theme2')"></p>
  <p @click="changeTheme('theme3')"></p>
  <my-footer></my-footer>
</div>

methods: {
    changeTheme(theme) {
      window.document.documentElement.setAttribute("data-theme", theme);
    }
}

//header.vue页面
<template>
  <div class="header">头部</div>
</template>

<style lang="scss" scoped>
@import '@/assets/scss/mixin.scss';
@import '@/assets/scss/variable.scss';

.header{
    height: 80px;
    line-height: 80px;
    @include bg_color($background-color-theme);
    @include font_color($font-color-theme);
}
</style>