Skip to content

Commit

Permalink
docs: update
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoxian521
xiaoxian521 committed Jun 5, 2024
1 parent fb0d954 commit 01f7911
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 6 deletions.
Binary file modified docs/.vuepress/public/img/guide/theme.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 7 additions & 6 deletions docs/01.指南/02.进阶/02.主题和暗黑模式.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`，然后参考下面的字段解析，进行样式调试即可

### 字段解析

Expand All @@ -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)

## 暗黑模式

Expand All @@ -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-暗黑模式)

Expand Down

0 comments on commit 01f7911

Please sign in to comment.