---
order: 6
navTitle: 仪表板主题
indexTitle: 主题管理
---
# 仪表板主题管理

使用主题可以制作美观仪表板，切换不同主题可以实现同一个仪表板展示不同的效果，满足在多个场景下的应用。例如：浅色更适合日常的工作，不那么容易产生视觉疲劳，深色则更适合演示汇报，更加炫酷能够吸引注意力。

仪表板主题分项目主题和系统主题：

- 项目主题：仅用于当前项目下的仪表板文件，相关文件是存储在`当前项目-资源-settings-themes-dash`下
- 系统主题：可用于当前系统中所有项目下的仪表板文件，相关文件是存储在`系统数据-资源-settings-themes-dash`下

## 系统自带主题模板{#system-theme}

系统自带多个美观的主题，这些主题都是经过设计师精心设计的，直接选择即可复用样式，用户可以借助主题风格制作出美观的仪表板。且主题之间都是可以相互切换的，点击仪表板编辑界面左上角的`文件-切换主题`，即可弹出**选取主题**的对话框，可在此处选取切换不同的主题。

![切换主题](./images/2021-09-23-17-28-53.gif)

不同主题下组件的风格是通过风格名称来对应切换的，例如：

- **柱形图**在**绿色主题**下应用的是`图表风格3`，则切换主题后，**组合图**则是应用的**海洋王国**下的`图表风格3`
- 如果**海洋王国**中的组合图没有命名为`图表风格3`的风格，那么他会自动选用组合图风格列表中的第一个

![切换风格](./images/2021-09-23-17-52-18.gif)

示例地址：[切换主题风格](https://demo.succbi.com/v5/bi/%E6%80%BB%E4%BD%93%E7%BB%8F%E8%90%A5%E6%83%85%E5%86%B5)

:::tip
为什么我们的可视化页面可以轻松的做到无缝切换多个主题都那么好看呢？感兴趣的话一起来[组件风格规范](../components/chart/README.md)看看吧，等你哟~
:::

## 新增主题{#custom-theme}

如需自行新增一个主题，按照如下步骤操作即可：

1. **增加新主题**：有两种方式
   - 通过复制已有主题的方式新增一个主题，具体操作见[管理主题-复制主题](#copy)
   - 在`项目-资源-settings-themes-dash`下导入所需的主题文件，点击[此处](https://www.jianguoyun.com/p/DboY7t0Qz--gChickawE)下载**空的主题文件**
2. **重命名**：新增了一个主题后，可以再次修改主题名称。具体操作见[管理主题-重命名](#rename-delete)
3. **修改主题色板/风格**：自定义色板颜色及组件风格，具体操作见[管理主题-修改主题](#modify-theme)
4. **更新主题缩略图**：新增了自定义的主题后还需要有一张缩略图来示意主题的色调，更新缩略图的具体操作见[管理主题-更新缩略图](#thumbnail)
   :::tip
   空的主题文件是指，只包含色板颜色、及组件默认风格，不带任何图片、图标的主题文件。
   :::

## 管理主题{#manage-theme}

用户可以对已有的主题进行[复制](#copy)、[修改主题色板及组件风格](#modify-theme)、[重命名和删除](#rename-delete)和[更新缩略图的操作](#thumbnail)。

### 复制主题{#copy}

复制主题有两个入口，分别是在仪表板的编辑界面和资源目录下：

- **入口一**：直接在仪表板编辑界面的**选取主题**对话框中选中一个主题，右键后选择功能菜单中的**复制主题**即可复制出一个新的主题
- **入口二**：在`项目-资源-settings-themes-dash`下选中某个主题文件后，右键复制到当前的dash目录下即可

选取主题的对话框中|资源目录下
-|-|
![复制主题1](./images/2021-09-27-10-11-51.gif)|![复制主题2](./images/2021-09-27-10-15-13.gif)

### 修改主题{#modify-theme}

主题文件目录下一般包含如下内容：

![主题文件](./images/2021-09-27-14-11-30.png)

- **icons**：存储主题相关的图标
- **images**：存储主题相关的图片
- **theme.json**：以json的形式记录主题色板、组件风格等内容
- **thumbnail**：即主题缩略图

修改主题包含两部分内容，分别是修改主题色板和修改组件风格：

1. 修改主题色板：如需修改主题的基础色调，即主题色板，需修改主题的`theme.json`文件，具体操作见[仪表板主题制作](./制作自己的主题.md#modify-style)
2. 修改组件风格：如需调整组件风格，可以直接在界面上对组件风格进行**更新**或**新增**，具体操作见[风格](../design/type/basic/style.md)

:::tip
同一时间建议只能有一个人修改主题风格，多人同时修改时会相互覆盖，可能导致部分内容丢失，所以建议指定一人维护。
:::

### 重命名和删除{#rename-delete}

重命名和删除都有两个入口，分别是在仪表板的编辑界面和资源目录下：

- **入口一**：仪表板编辑界面，点击页面左上角的`文件-切换主题`，弹出**选取主题**对话框后，选择其中一个主题右键**重命名**或**删除**即可
- **入口二**：在`主题所在项目-资源-settings-themes-dash`下选中某个主题文件后，右键**重命名**或**删除**即可

选取主题的对话框中|资源目录下
-|-|
![重命名和删除1](./images/2021-09-27-16-11-14.png)|![重命名和删除2](./images/2021-09-27-16-12-54.png)

### 更新缩略图{#thumbnail}

主题缩略图是用来示意当前主题的基础色调，用户可根据缩略图初步对主题进行筛选使用。此处以更新**系统主题**缩略图为例演示具体操作，更新后的缩略图效果仍是在选取主题的对话框中查看。

![更新缩略图](./images/2021-09-27-10-55-13.gif)

1. **在本地准备好缩略图文件**：将设计师处理好的缩略图文件（大小要求为`416*234`、命名要求为`thumbnail`），缩略图的格式可以是`jpg`也可以是`png`
2. **进入资源目录**：系统数据-资源-settings-themes-dash
3. **删除旧文件**：删除相应主题文件夹下的`thumbnail.png`文件
4. **导入新文件**：选中当前主题文件目录，右键导入本地准备好的缩略图文件即可