logologo
开始
手册
开发
插件
API
English
简体中文
开始
手册
开发
插件
API
English
简体中文
logologo

系统管理

插件管理
系统设置
自定义品牌
主题编辑器
语言设置
本地化管理
Previous Page自定义品牌
Next Page语言设置

#主题编辑器

当前主题功能基于 Ant Design 5.x 版本实现,建议在阅读本文之前先了解定制主题的相关概念。

#介绍

主题编辑器插件用于修改整个前端页面的样式。目前支持编辑全局范围的 SeedToken、MapToken、AliasToken,并支持切换为 暗黑模式 和 紧凑模式。后续可能会支持组件级别的主题定制。

#使用说明

#启用主题插件

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

20240409132838

#进入主题配置页面

启用插件后,点击卡片左下角的设置按钮,跳转到主题编辑页面。默认提供四个主题选项:默认主题、暗黑主题、紧凑主题 和 紧凑暗黑主题。

20240409133020

#新增主题

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

20240409133147

#应用新主题

将鼠标移至页面右上角,可以看到主题切换项,点击即可切换到其他主题,例如刚才新增的主题。

20240409133247

#编辑已有主题

点击卡片左下角的 编辑 按钮,页面右侧会弹出主题编辑器(与新增主题相同),编辑完成后点击保存即可完成主题的修改。

20240409134413

#设置用户可选择的主题

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

20240409133331

#设置为默认主题

在初始状态下,默认主题是 默认主题。如果需要将某个主题设置为默认主题,可以开启该主题卡片右下角的 默认主题 开关,这样用户首次打开页面时将看到该主题。注意:默认主题不可删除。

20240409133409

#删除主题

点击卡片下方的 删除 按钮,在弹出的确认对话框中点击确认即可删除主题。

20240409133435