主题配置 ​

动态和集成的主题配置在Mermaid版本8.7.0中引入。

现在可以在整个站点级别或单个Mermaid图表上自定义主题。对于整个站点的主题自定义，使用initialize调用。对于特定图表的自定义，使用init指令。

可用主题 ​

1. default - 这是所有图表的默认主题。

2. neutral - 这个主题非常适合用于打印的黑白文档。

3. dark - 这个主题与深色元素或深色模式搭配得很好。

4. forest - 这个主题包含绿色调。

5. base - 这是唯一可以修改的主题。将此主题作为自定义的基础。

全站主题 ​

要自定义整个网站的主题，请在mermaid上调用initialize方法。

设置theme为base的initialize调用示例：

mermaid.initialize({
  securityLevel: 'loose',
  theme: 'base',
});

特定图表主题 ​

要自定义单个图表的主题，请使用 init 指令。

示例：使用init指令将theme设置为forest：

提醒：唯一可以自定义的主题是base主题。以下部分介绍了如何使用themeVariables进行自定义。

使用 themeVariables 自定义主题 ​

要制作自定义主题，请通过init修改themeVariables。

您需要使用base主题，因为它是唯一可修改的主题。

使用 init 指令修改 themeVariables 的示例：

颜色与颜色计算 ​

为了确保图表的可读性，某些变量的默认值是从其他变量计算或派生的。例如，primaryBorderColor 是从 primaryColor 变量派生的。因此，如果 primaryColor 变量被自定义，Mermaid 会自动调整 primaryBorderColor。调整可能意味着颜色反转、色调变化、变暗/变亮10%等。

主题引擎只会识别十六进制颜色，而不会识别颜色名称。因此，值 #ff0000 将有效，但 red 则不会。

主题变量 ​

流程图变量 ​

序列图变量 ​

饼图变量 ​

状态颜色 ​

类颜色 ​

用户旅程颜色 ​