@nocobase/plugin-theme-editor (0.21.12)
Published 2024-04-16 14:13:25 +08:00 by sealday
Installation
@nocobase:registry=npm install @nocobase/plugin-theme-editor@0.21.12"@nocobase/plugin-theme-editor": "0.21.12"About this package
English | 中文
当前主题功能是在 antd 5.x 版本的基础上实现的，所以在阅读本文之前最好先阅读一下定制主题相关的概念。
介绍
目前支持编辑全局范围的 SeedToken、MapToken、AliasToken，和支持切换为 暗黑模式 和 紧凑模式。后期有可能会支持组件级别的主题定制。
如何使用
1、启用主题插件
首先把 NocoBase 更新到最新版本，然后会在插件管理页面看到 theme-editor 的卡片，点击卡片右下角的 启用 按钮等待页面刷新。
2、跳转到主题配置页面
启用之后点击卡片左下角的设置按钮，会跳转到主题编辑页面。默认会有三个主题选项，分别是 antd 的默认主题、暗黑主题 和 紧凑主题。
新增一个主题
点击 添加新主题 按钮，选择 新增一个全新的主题，然后会在页面右侧弹出一个 主题编辑器，支持编辑 颜色、尺寸、风格等。编辑好之后输入主题名称然后点击保存即可完成主题的新增。
应用新主题
可以把鼠标移到页面右上角，可以看到一个主题切换项，点击可以切换到其他主题，比如可以切换刚才新增的主题。
编辑已经存在的主题
点击卡片左下角的 编辑 按钮，如同新增主题一样，会在页面右侧弹出一个 主题编辑器，编辑好之后点击保存即可完成主题的编辑。
用户切换主题时的可选项
新添加的主题默认是允许非管理员用户切换的，如果不想让非管理员用户切换某个主题，可以关闭主题卡片右下角的 可被用户选择 开关，这样用户就无法切换到该主题了。
设置为默认主题（默认主题不可删除）
在初始状态下，默认主题是 antd 的默认主题，如果想把某个主题设置为默认主题，可以开启卡片右下角的 默认主题 开关，这样当新用户第一次打开页面时应用的就是该默认主题。
删除主题
点击卡片下方的 删除 按钮，然后点击弹出的确认按钮即可删除主题。
Dependencies
Development Dependencies
| ID | Version |
|---|---|
| @ant-design/cssinjs | ^1.11.1 |
| @ant-design/icons | ~5.3.6 |
| @arvinxu/layout-kit | ^1 |
| @ctrl/tinycolor | ^3.6.0 |
| @emotion/css | ^11.11.2 |
| @types/lodash | 4.17.0 |
| antd | 5.16.1 |
| classnames | ^2.3.1 |
| lodash | 4.17.21 |
| rc-util | ^5.32.0 |
| react | ^18.2.0 |
| react-colorful | ^5.5.1 |
| react-i18next | ^11.15.1 |
| tinycolor2 | ^1.6.0 |
| use-debouncy | ^4.3.0 |
| vanilla-jsoneditor | ^0.17.8 |
Peer Dependencies
| ID | Version |
|---|---|
| @nocobase/actions | 0.21.12 |
| @nocobase/client | 0.21.12 |
| @nocobase/database | 0.21.12 |
| @nocobase/server | 0.21.12 |
| @nocobase/test | 0.21.12 |
| @nocobase/utils | 0.21.12 |
Keywords
System management