Pure Admin 保姆级文档(已更新至最新版v6.0.0)
  • 介绍
  • 快速开始
  • 目录结构
  • vscode文件夹详解
  • 平台配置
  • 布局
  • 路由和菜单
  • http请求
  • 打包和部署
  • 进阶

    • 图标
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 生态

    • 对接平台的前后端项目
    • 函数工具库
    • 组件库
    • vite插件
  • 其他

    • 赞助
    • 常见问题
    • 非平台问题跟踪记录
    • git常用命令
    • 技术网站推荐
  • 赞助
    • 后端项目
    • 哔哩哔哩 (opens new window)
  • 日志

    • Github日志 (opens new window)
    • Gitee日志 (opens new window)
  • 预览

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • max版 (opens new window)
    • utils文档 (opens new window)
  • Github源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
  • Gitee源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
优质服务
JS版本
Max版本
JS版本、Max版本限时活动
  • 介绍
  • 快速开始
  • 目录结构
  • vscode文件夹详解
  • 平台配置
  • 布局
  • 路由和菜单
  • http请求
  • 打包和部署
  • 进阶

    • 图标
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 生态

    • 对接平台的前后端项目
    • 函数工具库
    • 组件库
    • vite插件
  • 其他

    • 赞助
    • 常见问题
    • 非平台问题跟踪记录
    • git常用命令
    • 技术网站推荐
  • 赞助
    • 后端项目
    • 哔哩哔哩 (opens new window)
  • 日志

    • Github日志 (opens new window)
    • Gitee日志 (opens new window)
  • 预览

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • max版 (opens new window)
    • utils文档 (opens new window)
  • Github源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
  • Gitee源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
优质服务
JS版本
Max版本
  • 指南

    • 介绍
    • 快速开始
    • 目录结构
    • .vscode文件夹详解
    • 平台配置
    • 布局
    • 路由和菜单
    • http请求
    • 打包和部署
  • 进阶

    • 图标(有新的更新)
    • 主题和暗黑模式
      • 内置主题
      • 自定义主题
        • 添加自定义主题
        • 自定义CssVar解析
      • element-plus 主题色
      • 暗黑模式
        • 具体实现
        • 样式兼容
    • 国际化
    • Tailwind CSS(有新的更新)
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 生态

    • 对接平台的前后端项目
    • 函数工具库
    • 组件库
    • vite插件
  • 其他

    • 赞助
    • 常见问题
    • 非平台问题跟踪记录
    • git常用命令
    • 技术网站推荐
目录

主题和暗黑模式

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

# 内置主题

img

从左往右:亮白色(默认) (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 为您给主题色取的别名

② 上一步完成后,我们将主题色在 src/style/theme.scss (opens new window) 文件里进行充分适配

# 自定义CssVar解析

// 菜单激活时字体和图标的颜色
--pure-theme-sub-menu-active-text;

// 菜单未激活时的整体背景色
--pure-theme-menu-bg;

// 顶部、混合菜单模式下最右上角 搜索、告警、用户名、设置鼠标覆盖后的背景色
--pure-theme-menu-hover;

// 子菜单未激活时的背景色
--pure-theme-sub-menu-bg;

// 菜单未激活时字体和图标的颜色
--pure-theme-menu-text;

// logo 的背景色
--pure-theme-sidebar-logo;

// 鼠标覆盖到菜单时字体和图标的颜色
--pure-theme-menu-title-hover;

// 左侧、综合菜单模式下左边菜单 ::before 元素的背景色
--pure-theme-menu-active-before;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 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>
1
上次更新: 2025/05/09, 02:23:01
图标(有新的更新)
国际化

← 图标(有新的更新) 国际化→

最近更新
更多文章>
starsstars18k18k
forksforks3.4k3.4k
Theme by Vdoing | Copyright © 2020-2025 pure-admin | MIT License