---
order: 3
navTitle: 制作自定义主题
---
# 制作自定义主题

系统支持自定义报表主题，当[系统自带的主题](./system-themes.md)无法满足项目需求时，可以根据项目设计并新增主题，本文将介绍如何去新增自定义主题。

新增自定义主题可按如下步骤操作：

1. [确定主题规范](#inspect)：当确定了主题的主色调之后，还需要设计师去设计相关的配色，并产出主题规范
2. [新增主题文件](#custom-theme)：通过复制或导入的方式，新增主题文件
3. [修改主题色板和风格](#modify)：根据设计师提供的主题规范，对主题进行自定义配置
4. [更新缩略图](#thumbnail)：替换thumbnail.png文件
5. [测试主题](#test)：测试新增的主题，确保颜色、风格无误

## 检查主题规范文件{#inspect}

设计师需提供主题规范，需要确认包含如下内容：

1. 主题色板10个颜色
2. 主题渐变10个颜色
3. 6个指定的主题颜色：定义单元格边框、冻结行列线、以及输入组件的下拉面板和选中高亮的颜色
4. 4组色阶（不限于4组）
5. 单元格风格：大标题、行(列)标题\_一级标题、表头(尾)、行(列)标题\_二级标题、小计、合计(1)、合计(2)、解释性文字、链接单元格、注释。这些是归纳了常见的场景后做成的内置风格，覆盖了报表大多数应用场景

[点击此处下载报表主题规范原图](https://www.jianguoyun.com/p/DSWgqCcQz--gChiaq6wE)（提取码：SuccBI）

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

新增主题有两种方式，复制已有的主题或直接导入新的主题文件。

:::tip 说明
若想制作[系统主题](./README.md)则将主题文件放在`系统资源`项目下，若想制作[项目主题](./README.md)则将主题文件放在`目标项目`下。
:::

### 复制已有主题{#copy}

1. **复制主题**：在【系统数据】项目里的【资源】-【settings】-【themes】-【rpt】目录下复制一个已有的主题文件
2. **重命名**：修改主题名称和描述，注意这里的主题名称相当于ID，只能用英文

![新增主题1](./images/2021-12-08-15-00-21.gif)

### 导入新的主题文件{#import}

1. **导入主题文件**：在【项目】-【资源】-【settings】-【themes】-【rpt】目录下导入一个报表主题文件，点击[此处](https://www.jianguoyun.com/p/DYcWXEwQz--gChidq6wE)下载（提取码：SuccBI）
2. **重命名**：修改主题名称和描述

![新增主题2](./images/2021-12-08-15-31-21.gif)

## 修改主题{#modify}

报表主题文件目录下包含**icons**、**images**、**theme.json**、**thumbnail**这些内容。

![主题文件](./images/2021-12-13-10-09-00.png)

修改报表主题包含两部分内容，分别是修改主题色板和单元格风格：

- **修改json**：如需修改主题的基础色调，即主题色板，需[修改主题的theme.json文件](#modify-json)
- **修改单元格风格**：[单元格风格](/rpt/style)即通常用到的`正文`、`大标题`等风格，可以直接在界面上对[单元格风格进行更新](#modify-style)

:::tip 说明
报表主题风格相对比较固定，初次确定下来后，如非必要不建议多次进行调整。且同一时间建议只能有一个人修改主题风格，多人同时修改时会相互覆盖，可能导致部分内容丢失，所以建议指定一人维护。
:::

### 修改json{#modify-json}

需要进入主题的json文件中，修改对应位置颜色的十六进制值，需要修改的内容有:

- [主题色板10个颜色](../../data-viz/dash/manage-themes/制作自己的主题.md#themecolor1)
- [主题渐变10个颜色](../../data-viz/dash/manage-themes/制作自己的主题.md#gradient)
- [6个指定颜色](../../data-viz/dash/manage-themes/制作自己的主题.md#specify-color)
- [4组色阶](../../data-viz/dash/manage-themes/制作自己的主题.md#color-scale)

具体操作可参考[仪表板主题制作](../../data-viz/dash/manage-themes/制作自己的主题.md#modify)。

### 修改单元格风格{#modify-style}

由于复制或导入的主题文件中都已经包含对应的风格，只需修改更新即可。报表主题中内置的单元格风格都需要更新，下面以`行(列)标题_二级标题`为例来演示如何修改风格，具体操作如下：

![更新风格](./images/2021-12-10-14-32-17.gif)

1. **选择主题**：在报表中切换到新增的主题
2. **打开主题规范**：打开[主题规范文件](#inspect)，找到需要修改的单元格风格，用于取色
3. **应用风格**：选中一个单元格，打开风格列表，找到需要更新的`行(列)标题_二级标题`，应用风格
4. **修改风格**：在主题规范文件中找到`行(列)标题_二级标题`对应的填充色、字体颜色以及字体大小，依次修改报表中的对应样式属性
5. **更新风格**：修改完成后，点击风格名称右侧的小三角，下拉选择`更新风格`
6. 按照以上操作修改完所有的风格即可

## 更新缩略图{#thumbnail}

报表主题缩略图是用来示意当前主题的基础样式，用户可以根据缩略图初步对主题进行筛选使用。更新报表主题缩略图的操作同[仪表板-更新缩略图](../../data-viz/dash/manage-themes/README.md#thumbnail)。

## 测试主题{#test}

### 确认当前主题风格无误{#test-current-theme}

可以制作一张包含所有单元格风格的报表，类似下图，确认**单元格的填充**、**字体的样式**、**隔行换色的颜色**、**冻结行列线的颜色**、**单元格边框色**等是否与设计稿一致。

![报表风格](./images/2021-12-10-16-57-17.png)

### 确认可无障碍切换主题{#test-switch-theme}

需切换到其他报表主题测试单元格风格是否异常，有以下几个需要注意的异常点：

1. 单元格的填充色未发生变化
2. 字体样式未发生变化或有异常变化
3. 隔行换色颜色与主题不匹配
4. 边框颜色与主题边框色不符
5. 冻结线的颜色未变化或与设置的主题色不符