画板主题与颜色系统
画板提供了一套强大的主题系统，旨在帮助您轻松创建美观、风格统一的图形。主题是作用于整个画板的全局配置，切换主题会改变所有元素的配色，但不能为单个元素设置独立主题。 主题演示
基于 Code 的颜色映射
为了实现主题切换，画板的颜色系统不直接存储具体的颜色值（如 #ffffff），而是使用一个抽象的 颜色 Code（一个整数）来指定颜色。在不同主题下，为颜色 code 值配置了不同的颜色。
工作原理：code 值会根据主题风格配置不同的颜色。在切换主题时会根据配置颜色值呈现不同的颜色，达到颜色跟随主题切换目的。
主题类型
画板内置了多种预设主题，以适应不同场景：
- 经典主题
- 简约灰主题
- 复古主题
- 炫彩主题
- 简约蓝主题
- 默认主题
颜色 Code 详解
颜色 Code 分为四种类型：填充色、描边色、文字颜色、文字背景色。
大部分图形共用一套通用的颜色 Code 表。然而，为达到最佳视觉效果，部分特殊图形（如便签、分区）拥有自己专属的颜色 Code 表。
填充颜色
通用填充颜色
适用于除特殊图形外的所有图形。
- Code 取值范围:
1-17 - 颜色表 (以“默认主题”为例):
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 1 | 白色 | #ffffff | |
| 2 | 浅紫色 | #eae2fe | |
| 3 | 浅蓝色 | #f0f4fc | |
| 4 | 浅靛青色 | #d6dcf3 | |
| 5 | 浅黄色 | #fef1ce | |
| 6 | 浅红色 | #fee3e2 | |
| 7 | 黑色 | #000000 | |
| 8 | 浅灰色 | #f5f5f5 | |
| 9 | 紫色 | #8569cb | |
| 10 | 蓝色 | #5178c6 | |
| 11 | 靛青色 | #5263a5 | |
| 12 | 黄色 | #d4b45b | |
| 13 | 红色 | #d25d5a | |
| 14 | 灰色 | #646a73 | |
| 15 | 中灰色 | #bbbfc4 | |
| 16 | 浅绿色 | #dff5e5 | |
| 17 | 绿色 | #509863 |
特殊图形填充色
- 分区 (Section)
- Code 取值范围:
1-8 - 颜色表 (以“默认主题”为例):
- Code 取值范围:
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 1 | 白色 | #ffffff | |
| 2 | 灰色 | #f5f6f7 | |
| 3 | 紫色 | #f5f1fd | |
| 4 | 蓝色 | #f3f5fc | |
| 5 | 绿色 | #f1f9f2 | |
| 6 | 黄色 | #fffcf2 | |
| 7 | 橙色 | #fff6ee | |
| 8 | 红色 | #fff3f0 |
- 便签 (Sticky Note)
- Code 取值范围:
0-8 - 颜色表 (以“默认主题”为例):
- Code 取值范围:
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 0 | 黄色 | #fef1ce | |
| 1 | 橙色 | #f5d1a7 | |
| 2 | 酸橙色 | #dff5e5 | |
| 3 | 绿色 | #cdf7cc | |
| 4 | 蓝色 | #c9e8ef | |
| 5 | 靛青色 | #d6dcf3 | |
| 6 | 紫色 | #d3ccee | |
| 7 | 玫红色 | #f1c5e7 | |
| 8 | 红色 | #f6c8c8 |
边框颜色
通用边框颜色
适用于除特殊图形外的所有图形。
- Code 取值范围:
1-12 - 颜色表 (以“默认主题”为例):
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 1 | 黑色 | #000000 | |
| 2 | 灰色 | #bbbfc4 | |
| 3 | 极浅灰色 | #eff0f1 | |
| 4 | 白色 | #ffffff | |
| 5 | 紫色 | #8569cb | |
| 6 | 蓝色 | #5178c6 | |
| 7 | 靛青色 | #5263a5 | |
| 8 | 黄色 | #d4b45b | |
| 9 | 红色 | #d25d5a | |
| 10 | 深灰色 | #646a73 | |
| 11 | 绿色 | #509863 | |
| 12 | 浅灰色 | #dee0e3 |
特殊图形边框颜色
- 连线 (Connector)
- Code 取值范围:
0-15 - 颜色表 (以“默认主题”为例):
- Code 取值范围:
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 0 | 白色 | #ffffff | |
| 1 | 浅灰色 | #eff0f1 | |
| 2 | 浅紫色 | #eae2fe | |
| 3 | 浅蓝色 | #f0f4fc | |
| 4 | 浅靛青色 | #d6dcf3 | |
| 5 | 浅黄色 | #fef1ce | |
| 6 | 浅红色 | #fee3e2 | |
| 7 | 黑色 | #000000 | |
| 8 | 灰色 | #bbbfc4 | |
| 9 | 紫色 | #8569cb | |
| 10 | 蓝色 | #5178c6 | |
| 11 | 靛青色 | #5263a5 | |
| 12 | 黄色 | #d4b45b | |
| 13 | 红色 | #d25d5a | |
| 14 | 浅绿色 | #dff5e5 | |
| 15 | 绿色 | #509863 |
- SVG 图形 (SVG)
- Code 取值范围:
0-11 - 颜色表 (以“默认主题”为例):
- Code 取值范围:
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 0 | 黑色 | #000000 | |
| 1 | 白色 | #ffffff | |
| 2 | 紫色 | #8569cb | |
| 3 | 蓝色 | #5178c6 | |
| 4 | 靛青色 | #5263a5 | |
| 5 | 黄色 | #d4b45b | |
| 6 | 红色 | #d25d5a | |
| 7 | 浅灰色 | #bbbfc4 | |
| 8 | 绿色 | #509863 | |
| 9 | 深灰色 | #646a73 | |
| 10 | 中灰色 | #dee0e3 | |
| 11 | 浅灰色 | #eff0f1 |
- 画笔图形 (Paint)
- Code 取值范围:
0-8 - 颜色表 (以“默认主题”为例):
- Code 取值范围:
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 0 | 黑色 | #2b2f36 | |
| 1 | 灰色 | #646a73 | |
| 2 | 浅灰色 | #bbbfc4 | |
| 3 | 紫色 | #9f6ff1 | |
| 4 | 蓝色 | #5083fb | |
| 5 | 绿色 | #32a645 | |
| 6 | 黄色 | #ffe928 | |
| 7 | 橙色 | #ed6d0c | |
| 8 | 红色 | #f54a45 |
文字颜色
- 文字颜色
- Code 取值范围:
0-8 - 颜色表 (以“默认主题”为例):
- Code 取值范围:
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 0 | 黑色 | #1f2329 | |
| 1 | 白色 | #ffffff | |
| 2 | 紫色 | #8569cb | |
| 3 | 蓝色 | #5178c6 | |
| 4 | 绿色 | #509863 | |
| 5 | 黄色 | #d4b45b | |
| 6 | 红色 | #d25d5a | |
| 7 | 灰色 | #8f959e | |
| 8 | 橙色 | #d48e5b |
文字背景颜色
- 文字背景颜色
- Code 取值范围:
0-17 - 颜色表 (以“默认主题”为例):
- Code 取值范围:
| code | 颜色预览 | 颜色描述 | rgb |
|---|---|---|---|
| 0 | -- | 无填充色 | -- |
| 1 | 白色 | #ffffff | |
| 2 | 浅紫色 | #e0d9f2 | |
| 3 | 浅蓝色 | #c5d2ec | |
| 4 | 浅绿色 | #abd3b6 | |
| 5 | 浅黄色 | #f3ebd3 | |
| 6 | 浅红色 | #f4d8d7 | |
| 7 | 黑色 | #000000 | |
| 8 | 中灰色 | #dee0e3 | |
| 9 | 紫色 | #6541be | |
| 10 | 蓝色 | #395fad | |
| 11 | 绿色 | #3e754c | |
| 12 | 黄色 | #f0da0f | |
| 13 | 红色 | #c43936 | |
| 14 | 浅灰色 | #f2f3f5 | |
| 15 | 灰色 | #bbbfc4 | |
| 16 | 浅橙色 | #f3e2d3 | |
| 17 | 橙色 | #c67134 |