nocobase/packages/plugins/@nocobase/plugin-theme-editor/README.zh-CN.md
2024-04-09 14:57:40 +08:00

3.4 KiB
Raw Blame History

English | 中文

主题编辑器

当前主题功能是在 antd 5.x 版本的基础上实现的,所以在阅读本文之前最好先阅读一下定制主题相关的概念。

介绍

可以简单理解为该插件就是用来修改整个前端页面的样式的。目前支持编辑全局范围的 SeedTokenMapTokenAliasToken,和支持切换暗黑模式紧凑模式。后期有可能会支持组件级别的主题定制。

使用说明

启用主题插件

首先把 NocoBase 更新到最新版本v0.11.1 及以上),然后在 插件管理页面 搜索 主题编辑器 的卡片,点击卡片右下角的 启用 按钮等待页面刷新。

20240409132838

跳转到主题配置页面

启用之后点击卡片左下角的设置按钮,会跳转到主题编辑页面。默认会有四个主题选项,分别是 默认主题暗黑主题紧凑主题紧凑暗黑主题

20240409133020

新增一个主题

点击 添加新主题 按钮,选择 新增一个全新的主题,然后会在页面右侧弹出一个 主题编辑器,支持编辑 颜色尺寸风格等。编辑好之后输入主题名称然后点击保存即可完成主题的新增。

20240409133147

应用新主题

可以把鼠标移到页面右上角,可以看到一个主题切换项,点击可以切换到其他主题,比如可以切换刚才新增的主题。

20240409133247

编辑已经存在的主题

点击卡片左下角的 编辑 按钮,如同新增主题一样,会在页面右侧弹出一个 主题编辑器,编辑好之后点击保存即可完成主题的编辑。

20240409134413

用户切换主题时的可选项

新添加的主题默认是允许用户切换的,如果不想让用户切换到某个主题,可以关闭主题卡片右下角的 可被用户选择 开关,这样用户就无法切换到该主题了。

20240409133331

设置为默认主题(默认主题不可删除)

在初始状态下,默认主题是 默认主题,如果想把某个主题设置为默认主题,可以开启卡片右下角的 默认主题 开关,这样当用户第一次打开页面时看到的就是该主题。

20240409133409

删除主题

点击卡片下方的 删除 按钮,然后点击弹出的确认按钮即可删除主题。

20240409133435