vue 结合scss实现前台主题颜色动态变化

1、安装scss，参考文章：

vue项目中设置全局引入scss，使每个组件都可以使用变量 - 简书在Vue项目中使用scss,如果写了一套完整的有变量的scss文件。那么就需要全局引入，这样在每个组件中使用。 可以在mian.js全局引入，下面是使用方法。 1： 安装no...https://www.jianshu.com/p/2129f7d704292、在 assets/styles下新建.scss文件，定义想要变化的颜色和主题。（只列举部分颜色）

// -------------------------------更换的系统主题颜色2（Standard）-----------------------------------//
// 菜单所有未选中文字样式
$menuTextStandard: #333333;
// 一级菜单样式
$menuBgStandard: #ffffff;
// 一级菜单鼠标悬浮
$menuHoverStandard: #f7f7f7;
// 一级菜单选中时文字样式
$subMenuActiveTextStandard: #82ba00;
// 选中背景：
$subMenuActiveBgStandard: #e6f1cc;
// -------------------------------更换的系统主题颜色3（StandardRed）-----------------------------------//
// 菜单所有未选中文字样式
$menuTextStandardRed: #333333;
// 一级菜单样式
$menuBgStandardRed: #ffffff;
// 一级菜单鼠标悬浮
$menuHoverStandardRed: #f7f7f7;
// 一级菜单选中时文字样式
$subMenuActiveTextStandardRed: #911844;
// 选中背景：
$subMenuActiveBgStandardRed: #e9d1da;
// -------------------------------更换的系统主题颜色4（StandardSkyBlue）-----------------------------------//
// 菜单所有未选中文字样式
$menuTextStandardSkyBlue: #333333;
// 一级菜单样式
$menuBgStandardSkyBlue: #ffffff;
// 一级菜单鼠标悬浮
$menuHoverStandardSkyBlue: #f7f7f7;
// 一级菜单选中时文字样式
$subMenuActiveTextStandardSkyBlue: #008299;
// 选中背景：
$subMenuActiveBgStandardSkyBlue: #cce6eb;

3、为需要切换的5个颜色在下面定义方法动态切换颜色：（注意部分样式要加 import 才会生效）

@mixin menuText($color) {
  color: $color;

  //   /*判断匹配*/
  [data-theme="standard"] & {
    color: $menuTextStandard;
  }

  [data-theme="standardRed"] & {
    color: $menuTextStandardRed;
  }

  [data-theme="standardSkyBlue"] & {
    color: $menuTextStandardSkyBlue;
  }
}

@mixin menuBg($color) {
  background-color: $color !important;

  //   /*判断匹配*/
  [data-theme="standard"] & {
    background-color: $menuBgStandard !important;
  }

  [data-theme="standardRed"] & {
    background-color: $menuBgStandardRed !important;
  }

  [data-theme="standardSkyBlue"] & {
    background-color: $menuBgStandardSkyBlue !important;
  }
}

@mixin menuHover($color) {
  background-color: $color;

  //   /*判断匹配*/
  [data-theme="standard"] & {
    background-color: $menuHoverStandard;
  }

  [data-theme="standardRed"] & {
    background-color: $menuHoverStandardRed;
  }

  [data-theme="standardSkyBlue"] & {
    background-color: $menuHoverStandardSkyBlue;
  }
}

@mixin subMenuActiveText($color) {
  color: $color !important;

  //   /*判断匹配*/
  [data-theme="standard"] & {
    color: $subMenuActiveTextStandard !important;
  }

  [data-theme="standardRed"] & {
    color: $subMenuActiveTextStandardRed !important;
  }

  [data-theme="standardSkyBlue"] & {
    color: $subMenuActiveTextStandardSkyBlue !important;
  }
}

@mixin subMenuActiveBg($color) {
  background-color: $color !important;

  //   /*判断匹配*/
  [data-theme="standard"] & {
    background-color: $subMenuActiveBgStandard !important;
  }

  [data-theme="standardRed"] & {
    background-color: $subMenuActiveBgStandardRed !important;
  }

  [data-theme="standardSkyBlue"] & {
    background-color: $subMenuActiveBgStandardSkyBlue !important;
  }

}

4、在main.js 中引入文件：

import './assets/styles/variables.scss'

5、在所有页面需要变色的颜色上使用：

// color:#f7f7f7  改为：
@include menuText();  

6、App.vue 中一键全局更改主题颜色：

 function setAttribute(theme) {
      window.document.documentElement.setAttribute("data-theme", theme);
 }
 setAttribute("standard");  // 应用主题2 
 setAttribute("standardRed");  // 应用主题3

本文参考链接：

vue+scss动态改变主题颜色 - 就这样吧丶 - 博客园1、新建.scss后缀公用文件，放在assets或者其他地方都可以 /*需要切换的颜色变量*/ $color-primary1:#1776E1; /* 更换的颜色 */ $color-primary2https://www.cnblogs.com/wtwebskill/p/11812687.html