docs: 更新主题和暗黑模式文档

pure-admin · Dec 17, 2024 · 181731e · 181731e
1 parent 78f74d8
commit 181731e
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/docs/01.指南/02.进阶/02.主题和暗黑模式.md b/docs/01.指南/02.进阶/02.主题和暗黑模式.md
@@ -11,55 +11,60 @@ permalink: /pages/theme/
 
 ![img](~@alias/img/guide/theme.jpg)
 
-从左往右：[亮白色（默认）](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L10) [道奇蓝](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L22) [深紫罗兰色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L34)
-[深粉色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L46) [猩红色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L58) [橙红色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L70) [绿宝石](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L82) [酸橙绿](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L94)
+从左往右：[亮白色（默认）](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L2) [道奇蓝](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L14) [深紫罗兰色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L26)
+[深粉色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L38) [猩红色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L50) [橙红色](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L62) [绿宝石](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L74) [酸橙绿](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss#L86)
 
 ## 自定义主题
 
 ### 添加自定义主题
 
-① 将您需要的主题色加入 [themeColors](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L20) 数组里，`color` 为主题色值，`themeColor` 为您给主题色取的别名
+① 将您需要的主题色加入 [themeColors](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L15) 数组里，`color` 为主题色值，`themeColor` 为您给主题色取的别名
 
-② 上一步完成后，我们将主题色在 [themeColors](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L8) 对象里进行充分适配，上面的 `themeColor` 作为当前自定义主题色的 `key`，然后参考下面的字段解析，进行样式调试即可
+② 上一步完成后，我们将主题色在 [src/style/theme.scss](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/theme.scss) 文件里进行充分适配
 
-### 字段解析
+### 自定义`CssVar`解析
 
 ```ts
 // 菜单激活时字体和图标的颜色
-subMenuActiveText;
+--pure-theme-sub-menu-active-text;
+
 // 菜单未激活时的整体背景色
-menuBg;
+--pure-theme-menu-bg;
+
 // 顶部、混合菜单模式下最右上角 搜索、告警、用户名、设置鼠标覆盖后的背景色
-menuHover;
+--pure-theme-menu-hover;
+
 // 子菜单未激活时的背景色
-subMenuBg;
-// 子菜单激活时的背景色
-subMenuActiveBg;
+--pure-theme-sub-menu-bg;
+
 // 菜单未激活时字体和图标的颜色
-menuText;
+--pure-theme-menu-text;
+
 // logo 的背景色
-sidebarLogo;
+--pure-theme-sidebar-logo;
+
 // 鼠标覆盖到菜单时字体和图标的颜色
-menuTitleHover;
+--pure-theme-menu-title-hover;
+
 // 左侧、综合菜单模式下左边菜单 ::before 元素的背景色
-menuActiveBefore;
+--pure-theme-menu-active-before;
 ```
 
 ## `element-plus` 主题色
 
-具体实现代码参考 [setEpThemeColor](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L88)
+具体实现代码参考 [setEpThemeColor](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L81)
 
 ## 暗黑模式
 
-### 页面如何打开暗黑模式
+<!-- ### 页面如何打开暗黑模式 -->
 
 <!-- <video width="320" height="240" controls>
   <source :src="$withBase('/video/theme.mov')" type="video/mp4">
 </video> -->
 
 ### 具体实现
 
-具体实现代码参考 [dataThemeChange](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L100)
+具体实现代码参考 [dataThemeChange](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L93)
 
 ### 样式兼容