如何实现一套代码多种主题和色系

以vue项目为例，我这里用到的是css预处理语言是scss.
1、在你的src文件夹中新建一个style的文件夹，在你的style文件夹中新建两个scss文件
(1)以字体颜色和背景颜色为例，新建theme.scss，在这里定义不同的主题的字体颜色和背景颜色

$background-color-theme: #517df7;
$background-color-theme1: #17B6FF;
$background-color-theme2: #FF6633;

$font-color-theme : #517DF7;
$font-color-theme1 : #17B6FF;
$font-color-theme2 : #FF6633;

（2）统计目录下在建一个mixin.scss 在这个文件中去实现不同背景色的赋值
先引入theme.scss

@charset "utf-8";
@import "./themes.scss";

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

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