内置丰富的主题可供选择，也可自行配置主题并且适配了暗黑模式

内置主题

从左往右：道奇蓝（默认） (opens new window) 亮白色 (opens new window) 猩红色 (opens new window) 橙红色 (opens new window) 金色 (opens new window) 绿宝石 (opens new window) 酸橙绿 (opens new window) 深粉色 (opens new window) 深紫罗兰色 (opens new window)

自定义主题

添加自定义主题

① 将您需要的主题色加入 themeColors (opens new window) 数组里，color 为主题色值，themeColor 为您给主题色取的别名

② 上一步完成后，我们将主题色在 themeColors (opens new window) 对象里进行充分适配，上面的 themeColor 作为当前自定义主题色的 key，然后参考下面的字段解析，进行样式调试即可

字段解析

// 菜单激活时字体和图标的颜色
subMenuActiveText;
// 菜单未激活时的整体背景色
menuBg;
// 顶部、综合菜单模式下最右上角 搜索、告警、用户名、设置鼠标覆盖后的背景色
menuHover;
// 子菜单未激活时的背景色
subMenuBg;
// 子菜单激活时的背景色
subMenuActiveBg;
// 菜单未激活时字体和图标的颜色
menuText;
// logo 的背景色
sidebarLogo;
// 鼠标覆盖到菜单时字体和图标的颜色
menuTitleHover;
// 左侧、综合菜单模式下左边菜单 ::before 元素的背景色
menuActiveBefore;

element-plus 主题色

具体实现代码参考 setEpThemeColor (opens new window)

暗黑模式

页面如何打开暗黑模式

具体实现

具体实现代码参考 dataThemeChange (opens new window)

样式兼容

① 如果您想适配自己组件的暗黑样式，只需要在 dark.scss (opens new window) 添加即可，当然这种方法也是当 Tailwind CSS 无法实现或者实现不易的情况下才选用

② 使用 Tailwind CSS (推荐)，在需要兼容暗黑模式的类名上加上 dark: 即可，比如下面代码，更具体的可以参考这里 tailwindcss

<p class="dark:text-white">Fighting!!!</p>