diff --git "a/docs/01.\346\214\207\345\215\227/02.\350\277\233\351\230\266/02.\344\270\273\351\242\230\345\222\214\346\232\227\351\273\221\346\250\241\345\274\217.md" "b/docs/01.\346\214\207\345\215\227/02.\350\277\233\351\230\266/02.\344\270\273\351\242\230\345\222\214\346\232\227\351\273\221\346\250\241\345\274\217.md" index a992c450..70931979 100644 --- "a/docs/01.\346\214\207\345\215\227/02.\350\277\233\351\230\266/02.\344\270\273\351\242\230\345\222\214\346\232\227\351\273\221\346\250\241\345\274\217.md" +++ "b/docs/01.\346\214\207\345\215\227/02.\350\277\233\351\230\266/02.\344\270\273\351\242\230\345\222\214\346\232\227\351\273\221\346\250\241\345\274\217.md" @@ -11,47 +11,52 @@ 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) ## 暗黑模式 -### 页面如何打开暗黑模式 +