# element-admin-theme

**Repository Path**: HengBenJiang/element-admin-theme

## Basic Information

- **Project Name**: element-admin-theme
- **Description**: 基于vue2+element ui+vue-element-admin的自定义动态主题，目前内置30多套后台管理系统主题，有没有哪款扣动你心弦~
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2026-01-23
- **Last Updated**: 2026-02-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: element-UI自定义主题, 后台管理系统主题

## README

# element-admin-theme

#### 介绍
基于vue2+element ui+vue-element-admin的自定义动态主题，主要为解决管理后台日渐审美疲劳的主题设计，为了满足客户日常使用系统需求，进行动态主题开发。目前内置30多套后台管理系统主题，有没有哪款扣动你心弦~<br>
如觉得有用请留下一颗小星星再走~o(~W~)->**

#### 开发环境
- node：v16.16.0
- npm：8.11.0
- vue：2.6.10
- element ui：2.13.2
- vue-element-admin：4.3.1


#### 安装教程

```bash
# 克隆项目
git clone -b master https://gitee.com/HengBenJiang/element-admin-theme.git

# 进入项目目录
cd element-admin-theme

# 下载依赖
npm install

# 运行项目
npm run dev
```

#### 主题欣赏

1.  element默认主题 <br>
![element默认主题](./src/assets/theme_img/element默认主题.png)<br>

2.  3d拟态主题 <br>
![3d拟态主题](./src/assets/theme_img/3d拟态主题.gif)<br>

3.  动态紫暗色主题 <br>
![动态紫暗色主题](./src/assets/theme_img/动态紫暗色主题.gif)<br>

4.  优雅紫暗色主题 <br>
![动态紫暗色主题](./src/assets/theme_img/优雅紫暗色主题.png)<br>

5.  品红暗色主题 <br>
![品红暗色主题](./src/assets/theme_img/品红暗色主题.png)<br>

6.  星芒电蓝主题 <br>
![星芒电蓝主题](./src/assets/theme_img/星芒电蓝主题.png)<br>

7.  暗域流光主题 <br>
![暗域流光主题](./src/assets/theme_img/暗域流光主题.png)<br>

8.  极客炫绿主题 <br>
![极客炫绿主题](./src/assets/theme_img/极客炫绿主题.png)<br>

9.  蓝粉高透主题 <br>
![蓝粉高透主题](./src/assets/theme_img/蓝粉高透主题.png)<br>

10.  蓝绿暗色主题 <br>
![蓝绿暗色主题](./src/assets/theme_img/蓝绿暗色主题.png)<br>

11.  磨砂玻璃主题 <br>
![磨砂玻璃主题](./src/assets/theme_img/磨砂玻璃主题.png)<br>

12.  新拟态亮色主题 <br>
![新拟态亮色主题](./src/assets/theme_img/新拟态亮色主题.png)<br>

13.  深海极光主题 <br>
![深海极光主题](./src/assets/theme_img/深海极光主题.png)<br>

14.  清新绿暗色主题 <br>
![清新绿暗色主题](./src/assets/theme_img/清新绿暗色主题.png)<br>

15.  热情暗红主题 <br>
![热情暗红主题](./src/assets/theme_img/热情暗红主题.png)<br>

16.  深靛紫色主题 <br>
![深靛紫色主题](./src/assets/theme_img/深靛紫色主题.png)<br>

17.  深空蓝图主题 <br>
![深空蓝图主题](./src/assets/theme_img/深空蓝图主题.png)<br>

18.  香芋紫暗色主题 <br>
![香芋紫暗色主题](./src/assets/theme_img/香芋紫暗色主题.png)<br>

19.  透明粉亮色主题 <br>
![透明粉亮色主题](./src/assets/theme_img/透明粉亮色主题.png)<br>

20.  渐变紫亮色主题 <br>
![渐变紫亮色主题](./src/assets/theme_img/渐变紫亮色主题.png)<br>

21.  豆绿亮色主题 <br>
![豆绿亮色主题](./src/assets/theme_img/豆绿亮色主题.png)<br>

22.  湖水蓝亮色主题 <br>
![湖水蓝亮色主题](./src/assets/theme_img/湖水蓝亮色主题.png)<br>

23.  幻紫蓝境主题 <br>
![幻紫蓝境主题](./src/assets/theme_img/幻紫蓝境主题.png)<br>

24.  渐变蓝亮色主题 <br>
![渐变蓝亮色主题](./src/assets/theme_img/渐变蓝亮色主题.png)<br>

25.  WindowsXP风格主题 <br>
![WindowsXP风格主题](./src/assets/theme_img/WindowsXP风格主题.png)<br>

26.  云图蓝影主题 <br>
![云图蓝影主题](./src/assets/theme_img/云图蓝影主题.png)<br>

27.  极境冰蓝主题 <br>
![极境冰蓝主题](./src/assets/theme_img/极境冰蓝主题.png)<br>

28.  渐变蓝亮色主题 <br>
![渐变蓝亮色主题](./src/assets/theme_img/渐变蓝亮色主题.png)<br>

29.  科技晴空主题 <br>
![科技晴空主题](./src/assets/theme_img/科技晴空主题.png)<br>

30.  罗兰紫亮色主题 <br>
![罗兰紫亮色主题](./src/assets/theme_img/罗兰紫亮色主题.png)<br>

31.  暖橙亮色主题 <br>
![暖橙亮色主题](./src/assets/theme_img/暖橙亮色主题.png)<br>

32.  青青草绿亮色主题 <br>
![青青草绿亮色主题](./src/assets/theme_img/青青草绿亮色主题.png)<br>

33.  优雅亮粉主题 <br>
![优雅亮粉主题](./src/assets/theme_img/优雅亮粉主题.png)<br>

34.  蓝紫暗色主题 <br>
![蓝紫暗色主题](./src/assets/theme_img/蓝紫暗色主题.png)<br>



#### 建议反馈

任何人可以分享想法，建议和疑问，欢迎提issues, 我们会尽快回复。

#### 特别鸣谢
本项目是基于[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD)开发

#### 主题来砸
欢迎UI大佬的主题来砸，我们期待您的设计。<br>
正赶来为您服务的是：<br>

人工智能爱好者.java&php程序猿.后端搬砖仔.css练习生.最会旅行达人.东莞租房中介.会炒菜摊主.瑞幸联名杯收藏者.码农.刘<br>

#### 开发原理

为了让大家了解本主题的实现原理，我提供了主题的实现的博客，希望对大家有用。<br>
[手摸手实现基于vue2+element UI+vue-element-admin的后台管理系统动态主题](https://blog.csdn.net/qq_23257451/article/details/157256206?sharetype=blogdetail&sharerId=157256206&sharerefer=PC&sharesource=qq_23257451&spm=1011.2480.3001.8118)