主题配置
Mermaid 版本 8.7.0 引入了动态且集成的主题配置。
现在可以在网站范围或单个 Mermaid 图表上自定义主题。对于网站范围的主题自定义，使用 initialize 调用。对于特定于图表的自定义，使用 init 指令。
可用主题
default - 这是所有图表的默认主题。
neutral - 此主题非常适合将要打印的黑白文档。
dark - 此主题与深色元素或黑暗模式搭配使用效果很好。
forest - 此主题包含绿色色调。
base - 这是唯一可以修改的主题。将此主题用作自定义的基础。
网站范围的主题
要自定义网站范围的主题，请在 mermaid 上调用 initialize 方法。
将 theme 设置为 base 的 initialize 调用的示例
javascript
mermaid.initialize({
securityLevel: 'loose',
theme: 'base',
});特定于图表的主题
要自定义单个图表的主题，请使用 init 指令。
将 theme 设置为 forest 的 init 指令的示例
提醒：唯一可以自定义的主题是
base主题。以下部分介绍如何使用themeVariables进行自定义。
使用 themeVariables 自定义主题
要创建自定义主题，请通过 init 修改 themeVariables。
您需要使用 base 主题，因为它是唯一可修改的主题。
| 参数 | 描述 | 类型 | 属性 |
|---|---|---|---|
| themeVariables | 可以使用 init 指令修改 | 对象 | primaryColor、primaryTextColor、lineColor (查看完整列表) |
使用 init 指令修改 themeVariables 的示例
颜色和颜色计算
为了确保图表的可读性，某些变量的默认值是计算或从其他变量派生的。例如，primaryBorderColor 是从 primaryColor 变量派生的。因此，如果自定义了 primaryColor 变量，Mermaid 将自动调整 primaryBorderColor。调整可能意味着颜色反转、色调变化、变暗/变亮 10% 等。
主题引擎只会识别十六进制颜色，而不是颜色名称。因此，#ff0000 值将有效，但 red 将无效。
主题变量
| 变量 | 默认值 | 描述 |
|---|---|---|
| darkMode | false | 影响派生颜色的计算方式。将值设置为 true 以启用黑暗模式。 |
| background | #f4f4f4 | 用于计算应为背景色或与背景对比的颜色 |
| fontFamily | trebuchet ms, verdana, arial | |
| fontSize | 16px | 以像素为单位的字体大小 |
| primaryColor | #fff4dd | 用作节点背景的颜色，其他颜色将从此颜色派生 |
| primaryTextColor | 从 darkMode #ddd/#333 计算得出 | 用作使用 primaryColor 的节点中的文本颜色 |
| secondaryColor | 从 primaryColor 计算得出 | |
| primaryBorderColor | 从 primaryColor 计算得出 | 用作使用 primaryColor 的节点中的边框的颜色 |
| secondaryBorderColor | 从 secondaryColor 计算得出 | 用作使用 secondaryColor 的节点中的边框的颜色 |
| secondaryTextColor | 从 secondaryColor 计算得出 | 用作使用 secondaryColor 的节点中的文本颜色 |
| tertiaryColor | 从 primaryColor 计算得出 | |
| tertiaryBorderColor | 从 tertiaryColor 计算得出 | 用作使用 tertiaryColor 的节点中的边框的颜色 |
| tertiaryTextColor | 从 tertiaryColor 计算得出 | 用作使用 tertiaryColor 的节点中的文本颜色 |
| noteBkgColor | #fff5ad | 用作注释中的背景颜色 |
| noteTextColor | #333 | 注释矩形中的文本颜色 |
| noteBorderColor | 从 noteBkgColor 计算得出 | 注释矩形中的边框颜色 |
| lineColor | 从 background 计算得出 | |
| textColor | 从 primaryTextColor 计算得出 | 图表中背景上的文本，例如标签上的文本以及时序图中的信号或甘特图中的标题 |
| mainBkg | 从 primaryColor 计算得出 | 流程图对象中的背景，如矩形/圆形、类图类、时序图等 |
| errorBkgColor | tertiaryColor | 语法错误消息的颜色 |
| errorTextColor | tertiaryTextColor | 语法错误消息的颜色 |
流程图变量
| 变量 | 默认值 | 描述 |
|---|---|---|
| nodeBorder | primaryBorderColor | 节点边框颜色 |
| clusterBkg | tertiaryColor | 子图中的背景 |
| clusterBorder | tertiaryBorderColor | 集群边框颜色 |
| defaultLinkColor | lineColor | 链接颜色 |
| titleColor | tertiaryTextColor | 标题颜色 |
| edgeLabelBackground | 从 secondaryColor 计算得出 | |
| nodeTextColor | primaryTextColor | 节点内部文本的颜色 |
时序图变量
| 变量 | 默认值 | 描述 |
|---|---|---|
| actorBkg | mainBkg | 参与者背景颜色 |
| actorBorder | primaryBorderColor | 参与者边框颜色 |
| actorTextColor | primaryTextColor | 参与者文本颜色 |
| actorLineColor | actorBorder | 参与者线条颜色 |
| signalColor | textColor | 信号颜色 |
| signalTextColor | textColor | 信号文本颜色 |
| labelBoxBkgColor | actorBkg | 标签框背景颜色 |
| labelBoxBorderColor | actorBorder | 标签框边框颜色 |
| labelTextColor | actorTextColor | 标签文本颜色 |
| loopTextColor | actorTextColor | 循环文本颜色 |
| activationBorderColor | 从 secondaryColor 计算得出 | 激活边框颜色 |
| activationBkgColor | secondaryColor | 激活背景颜色 |
| sequenceNumberColor | 从 lineColor 计算得出 | 序列号颜色 |
饼图变量
| 变量 | 默认值 | 描述 |
|---|---|---|
| pie1 | primaryColor | 饼图中第一部分的填充 |
| pie2 | secondaryColor | 饼图中第二部分的填充 |
| pie3 | 从 tertiary 计算得出 | 饼图中第三部分的填充 |
| pie4 | 从 primaryColor 计算得出 | 饼图中第四部分的填充 |
| pie5 | 从 secondaryColor 计算得出 | 饼图中第五部分的填充 |
| pie6 | 从 tertiaryColor 计算得出 | 饼图中第六部分的填充 |
| pie7 | 从 primaryColor 计算得出 | 饼图中第七部分的填充 |
| pie8 | 从 primaryColor 计算得出 | 饼图中第八部分的填充 |
| pie9 | 从 primaryColor 计算得出 | 饼图中第九部分的填充 |
| pie10 | 从 primaryColor 计算得出 | 饼图中第十部分的填充 |
| pie11 | 从 primaryColor 计算得出 | 饼图中第十一部分的填充 |
| pie12 | 从 primaryColor 计算得出 | 饼图中第十二部分的填充 |
| pieTitleTextSize | 25px | 标题文本大小 |
| pieTitleTextColor | taskTextDarkColor | 标题文本颜色 |
| pieSectionTextSize | 17px | 单个部分标签的文本大小 |
| pieSectionTextColor | textColor | 单个部分标签的文本颜色 |
| pieLegendTextSize | 17px | 图表图例中标签的文本大小 |
| pieLegendTextColor | taskTextDarkColor | 图表图例中标签的文本颜色 |
| pieStrokeColor | black | 单个饼图部分的边框颜色 |
| pieStrokeWidth | 2px | 单个饼图部分的边框宽度 |
| pieOuterStrokeWidth | 2px | 饼图外圆的边框宽度 |
| pieOuterStrokeColor | black | 饼图外圆的边框颜色 |
| pieOpacity | 0.7 | 单个饼图部分的不透明度 |
状态颜色
| 变量 | 默认值 | 描述 |
|---|---|---|
| labelColor | primaryTextColor | |
| altBackground | tertiaryColor | 用于深层复合状态中的背景 |
类颜色
| 变量 | 默认值 | 描述 |
|---|---|---|
| classText | textColor | 类图中文字的颜色 |
用户旅程颜色
| 变量 | 默认值 | 描述 |
|---|---|---|
| fillType0 | primaryColor | 旅程图中第一个部分的填充颜色 |
| fillType1 | secondaryColor | 旅程图中第二个部分的填充颜色 |
| fillType2 | 从 primaryColor 计算得出 | 旅程图中第三个部分的填充颜色 |
| fillType3 | 从 secondaryColor 计算得出 | 旅程图中第四个部分的填充颜色 |
| fillType4 | 从 primaryColor 计算得出 | 旅程图中第五个部分的填充颜色 |
| fillType5 | 从 secondaryColor 计算得出 | 旅程图中第六个部分的填充颜色 |
| fillType6 | 从 primaryColor 计算得出 | 旅程图中第七个部分的填充颜色 |
| fillType7 | 从 secondaryColor 计算得出 | 旅程图中第八个部分的填充颜色 |