前端利用scss实现一键换肤功能

1.要实现系统的一键换肤功能，首先要将颜色作为变量提取出来，并为两种主题配置颜色

variables.scss

//浅色主题
$light-theme: (
        base-color: #000,
        background-color: #ccc
);

//深色主题
$dark-theme: (
        base-color: #fff,
        background-color: #000
);

//定义映射集合
$themes: (
        light-theme: $light-theme,
        dark-theme: $dark-theme
);


//获取颜色并为当前主题色配置颜色
//字体颜色
@mixin base-color() {
  @each $theme-name, $theme in $themes {
    [data-theme = '#{$theme-name}'] & {
      color: map-get($map: $theme, $key: base-color);
    }
  }
}

//背景色
@mixin base-background() {
  @each $theme-name, $theme in $themes {
    [data-theme = '#{$theme-name}'] & {
      background: map-get($map: $theme, $key: background-color);
    }
  }
}

$font-size: 14px;

2.在 App.vue 中定义名为 “data-theme” 的变量，可设置此变量来配置主题颜色

<template>
    <!-