【超简单】ElementPlus一键修改主题色（附代码，下载编译后立即可用）

Element Plus 主题样式自定义指南

概述

elementplus自定义了一套主题颜色，默认以蓝色为主。但有时候，我们的业务需要支持其它配色方案，这时候就需要有一个简单的全局文件可以替换ElementPlus默认的配色。

实现原理

Elementplus中，主要定义了5种颜色，每一种颜色有5中浅色变体，1种深色变体：

light-3: 基础颜色与白色混合，透明度约25%
light-5: 基础颜色与白色混合，透明度约50%
light-7: 基础颜色与白色混合，透明度约75%
light-8: 基础颜色与白色混合，透明度约85%
light-9: 基础颜色与白色混合，透明度约95%
dark-2: 基础颜色变暗约20%生成

Element Plus使用了Sass的颜色混合函数来生成各种变体。所以，我们需要仿照其格式编写一个属于我们自己的sass颜色配置文件，以完全覆盖前者（主要是覆盖各种控件的配色，如果需要修改字体配色可以把本代码拿去问AI，让AI给你加上）。

文件结构

在这里插入图片描述

实施步骤

1. 创建主题文件

在 src/assets/styles/element-plus/theme.scss 中创建主题文件：

// Element Plus 自定义主题 - 使用Sass自动生成颜色变体
@use 'sass:color';
@use 'sass:map';
@use 'sass:meta';

// 基础颜色配置
$colors: (
  'primary': #ff8343,
  'success': #59c9c5,  
  'warning': #4148a6,  
  'danger': #e74c3c,   
  'error': #ff3860,    
  'info': #3498db      
);

// 生成颜色变体的函数
@function generate-color-variants($base-color) {
  $variants: ();
  
  // 基础颜色
  $variants: map.merge($variants, ('base': $base-color));
  
  // Light variants (3, 5, 7, 8, 9)
  $variants: map.merge($variants, ('light-3': color.mix(#fff, $base-color, 5%)));
  $variants: map.merge($variants, ('light-5': color.mix(#fff, $base-color, 15%)));
  $variants: map.merge($variants, ('light-7': color.mix(#fff, $base-color, 30%)));
  $variants: map.merge($variants, ('light-8': color