vue3-element-admin 是基于 Vue3 + Vite5+ TypeScript5 + Element-Plus + Pinia 等主流技术栈构建的免费开源的后台管理前端模板（配套后端源码）。

一、定制Element-Plus主题

1.创建 variables.scss 变量文件

/*variables.scss*/
/*覆盖element-plus变量*/
$--el-upload-picture-card-size:40px;
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('white': #ffffff,'black': #000000,'primary': ('base': #03a9f4,//主题色),'success': ('base': #67c23a,),'warning': ('base': #e6a23c,),'danger': ('base': #f56c6c,),'error': ('base': #f56c6c,),'info': ('base': #909399,),),
);/*定义项目全局变量*/
/** 全局SCSS变量 */
:root {--menu-background: rgb(255 255 255);--menu-text: #3f4347; 
}$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色

2.Vite配置导入SCSS全局变量文件

// vite.config.ts
css: {// CSS 预处理器preprocessorOptions: {//define global scss variablescss: {javascriptEnabled: true,additionalData: `@use "@/styles/variables.scss" as *;`}}
}

在variables.scss可以重新定义element-plus变量的值.变量可参考官网文档:https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss