diff --git a/docs/.vuepress/public/img/guide/theme.jpg b/docs/.vuepress/public/img/guide/theme.jpg index 5fba50b4d..e36a706b6 100644 Binary files a/docs/.vuepress/public/img/guide/theme.jpg and b/docs/.vuepress/public/img/guide/theme.jpg differ 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 e7122cb04..05c7f2da4 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,15 +11,16 @@ permalink: /pages/theme/ ![theme](~@alias/img/guide/theme.jpg) -从左往右:[道奇蓝(默认)](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L9) [亮白色](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L20) [猩红色](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L31) [橙红色](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L42) [金色](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L53) [绿宝石](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L64) [酸橙绿](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L75) [深粉色](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L86) [深紫罗兰色](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L97) +从左往右:[亮白色(默认)](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) ## 自定义主题 ### 添加自定义主题 -① 将您需要的主题色加入 [themeColors](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/hooks/useDataThemeChange.ts#L15) 数组里,`color` 为主题色值,`themeColor` 为您给主题色取的别名 +① 将您需要的主题色加入 [themeColors](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L20) 数组里,`color` 为主题色值,`themeColor` 为您给主题色取的别名 -② 上一步完成后,我们将主题色在 [themeColors](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/theme/index.ts#L8) 对象里进行充分适配,上面的 `themeColor` 作为当前自定义主题色的 `key`,然后参考下面的字段解析,进行样式调试即可 +② 上一步完成后,我们将主题色在 [themeColors](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/theme/index.ts#L8) 对象里进行充分适配,上面的 `themeColor` 作为当前自定义主题色的 `key`,然后参考下面的字段解析,进行样式调试即可 ### 字段解析 @@ -46,7 +47,7 @@ menuActiveBefore; ## `element-plus` 主题色 -具体实现代码参考 [setEpThemeColor](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/hooks/useDataThemeChange.ts#L70) +具体实现代码参考 [setEpThemeColor](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L88) ## 暗黑模式 @@ -58,11 +59,11 @@ menuActiveBefore; ### 具体实现 -具体实现代码参考 [dataThemeChange](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/layout/hooks/useDataThemeChange.ts#L82) +具体实现代码参考 [dataThemeChange](https://github.com/pure-admin/vue-pure-admin/blob/main/src/layout/hooks/useDataThemeChange.ts#L100) ### 样式兼容 -① 如果您想适配自己组件的暗黑样式,只需要在 [dark.scss](https://gitee.com/yiming_chang/pure-admin-thin/blob/main/src/style/dark.scss) 添加即可,当然这种方法也是当 `Tailwind CSS` 无法实现或者实现不易的情况下才选用 +① 如果您想适配自己组件的暗黑样式,只需要在 [dark.scss](https://github.com/pure-admin/vue-pure-admin/blob/main/src/style/dark.scss) 添加即可,当然这种方法也是当 `Tailwind CSS` 无法实现或者实现不易的情况下才选用 ② 使用 `Tailwind CSS` (推荐),在需要兼容暗黑模式的类名上加上 `dark:` 即可,比如下面代码,更具体的可以参考这里 [tailwindcss](/pages/tailwindcss/#_5-暗黑模式)