主題配置
動態和整合的主題配置是在 Mermaid 8.7.0 版本中引入的。
現在可以在全站範圍或個別 Mermaid 圖表上自訂主題。對於全站主題自訂，會使用 initialize 呼叫。對於圖表特定自訂，會使用 init 指示詞。
可用主題
預設 - 這是所有圖表的預設主題。
中性 - 此主題非常適合將列印的黑白文件。
深色 - 此主題與深色元素或深色模式搭配使用效果很好。
森林 - 此主題包含綠色陰影。
基本 - 這是唯一可以修改的主題。使用此主題作為自訂的基礎。
全站主題
若要自訂全站主題，請在 mermaid 上呼叫 initialize 方法。
將 theme 設定為 base 的 initialize 呼叫範例
javascript
mermaid.initialize({
securityLevel: 'loose',
theme: 'base',
});圖表特定主題
若要自訂個別圖表的主題，請使用 init 指示詞。
將 theme 設定為 forest 的 init 指示詞範例
提醒：唯一可以自訂的主題是
base主題。以下章節介紹如何使用themeVariables進行自訂。
使用 themeVariables 自訂主題
若要建立自訂主題，請透過 init 修改 themeVariables。
您需要使用基本主題，因為它是唯一可修改的主題。
| 參數 | 描述 | 類型 | 屬性 |
|---|---|---|---|
| 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 | 從背景計算 | |
| 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 | 圓餅圖中第 1 個區段的填滿 |
| pie2 | secondaryColor | 圓餅圖中第 2 個區段的填滿 |
| pie3 | 從 tertiary 計算 | 圓餅圖中第 3 個區段的填滿 |
| pie4 | 從 primaryColor 計算 | 圓餅圖中第 4 個區段的填滿 |
| pie5 | 從 secondaryColor 計算 | 圓餅圖中第 5 個區段的填滿 |
| pie6 | 從 tertiaryColor 計算 | 圓餅圖中第 6 個區段的填滿 |
| pie7 | 從 primaryColor 計算 | 圓餅圖中第 7 個區段的填滿 |
| pie8 | 從 primaryColor 計算 | 圓餅圖中第 8 個區段的填滿 |
| pie9 | 從 primaryColor 計算 | 圓餅圖中第 9 個區段的填滿 |
| pie10 | 從 primaryColor 計算 | 圓餅圖中第 10 個區段的填滿 |
| pie11 | 從 primaryColor 計算 | 圓餅圖中第 11 個區段的填滿 |
| pie12 | 從 primaryColor 計算 | 圓餅圖中第 12 個區段的填滿 |
| 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 | 旅程圖中第 1 個區段的填滿 |
| fillType1 | secondaryColor | 旅程圖中第 2 個區段的填滿 |
| fillType2 | 從 primaryColor 計算 | 旅程圖中第 3 個區段的填滿 |
| fillType3 | 從 secondaryColor 計算 | 旅程圖中第 4 個區段的填滿 |
| fillType4 | 從 primaryColor 計算 | 旅程圖中第 5 個區段的填滿 |
| fillType5 | 從 secondaryColor 計算 | 旅程圖中第 6 個區段的填滿 |
| fillType6 | 從 primaryColor 計算 | 旅程圖中第 7 個區段的填滿 |
| fillType7 | 從 secondaryColor 計算 | 旅程圖中第 8 個區段的填滿 |