自定义主题&替换elementplus主题

@use 'sass:map';
 $colors: () !default;
 $colors: (
  "--color-white": #ffffff,
  "--color-black": #000000,
  "--color-primary": #0400ff,
  "--color-success": #00ff55,
  "--color-warning": #e5ff00,
  "--color-danger": #ff0000,
  "--color-error": #ff0000,
  "--color-info": #6b6b6b,
  "--color-bg-1": #fff,
  "--color-bg-2": #f5f5f5,
  "--color-text-1": #000,
  "--color-text-2": #333,
  "--color-text-3": #666,
  "--color-top-menu-theme": #0011ff,
  "--color-top-menu-active": #0011ff,
  "--color-top-menu-text": #000000a6,
  "--color-top-menu-title": #ffffff,
  "--color-top-menu-bg": transparent,
  "--color-sub-menu-text": #000000a6,
  "--color-sub-menu-bg": #000c17,
  "--color-sub-menu-hover": #103b63,
  "--color-border": #ddd
);

自定义颜色变量，覆盖element主题颜色
theme.scss

@use "sass:math";
@use "sass:map";
@use "./index.scss" as *;

// 默认主题色
$primary: map.get($colors, --color-primary);
$success: map.get($colors, --color-success);
$warning: map.get($colors, --color-warning);
$danger: map.get($colors, --color-danger);
$info: map.get($colors, --color-info);
// 主背景色
$bg-main: map.get($colors, --color-bg-1);
// 次背景色
$bg-sec: map.get($colors, --color-bg-2);
// 文字颜色
$text-1: map.get($colors, --color-text-1);
$text-2: map.get($colors, --color-text-2);
$text-3: map.get($colors, --color-text-3);
// 边框
$border: map.get($colors, --color-border);
// 侧边导航宽度
$base-sidebar-width: 200px;
// 导航栏高度
$navbar-height: 60px;
// 默认菜单主题
$navbar-theme: map.get($colors, --color-top-menu-theme);
$base-menu-color: map.get($colors, --color-top-menu-text);
$base-menu-color-active: map.get($colors, --color-top-menu-active);
$base-menu-background: map.get($colors, --color-menu-bg);
$base-logo-title-color: map.get($colors, --color-top-menu-title);
$base-sub-menu-color: map.get($colors, --color-sub-menu-text);
$base-sub-menu-background: map.get($colors, --color-sub-menu-bg);
$base-sub-menu-hover: map.get($colors, --color-sub-menu-hover);
// 导航栏背景色
$top-bar-bg: linear-gradient(
  90deg,
  #2a65f6,
  #2879FF,
  #449cf8
);
// types
$types: primary, success, warning, danger, error, info;
$elcolor: "--el-color";
$color: "--color";
$mode: "light";

:root {
  // @each $key, $value in $colors {
  //   #{$key}: $value;
  // }
//替换elementui颜色
  @each $type in $types {
    #{$elcolor}-#{$type}: map.get($colors, #{$color}-#{$type});
    @for $i from 1 through 9 {
      #{$elcolor}-#{$type}-#{$mode}-#{$i}: mix(
        map.get($colors, --color-white),
        map.get($colors, #{$color}-#{$type}),
        math.percentage(math.div($i, 10))
      );
    }
  }
}

在vite.config.js配置我们刚刚写好的全局scss文件（theme.scss）

   ......
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
          @use "@/assets/styles/theme.scss" as *;
          `,
        },
      },
     }
  ......

在全局使用自定义颜色变量

.xxx{
	color:$primary
}