From 925065a5bda67bc3e7a5e9dab4760b48927f57ac Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 27 Sep 2025 07:32:29 +0800
Subject: [PATCH] feat(mermaid): support dark mode
---
assets/js/appearance.js | 33 ++++++++++++
assets/js/mermaid.js | 54 ++++++++++---------
.../samples/diagrams-flowcharts/index.it.md | 9 ----
.../samples/diagrams-flowcharts/index.ja.md | 9 ----
.../samples/diagrams-flowcharts/index.md | 9 ----
.../diagrams-flowcharts/index.zh-cn.md | 9 ----
layouts/shortcodes/mermaid.html | 4 +-
7 files changed, 62 insertions(+), 65 deletions(-)
diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index f29e8f4c..1af7f713 100644
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@@ -22,6 +22,34 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
});
}
+// Mermaid dark mode support
+var updateMermaidTheme = () => {
+ if (typeof mermaid !== 'undefined') {
+ const isDark = document.documentElement.classList.contains("dark");
+
+ const mermaids = document.querySelectorAll('pre.mermaid');
+ mermaids.forEach(e => {
+ if (e.getAttribute('data-processed')) {
+ // Already rendered, clean the processed attributes
+ e.removeAttribute('data-processed');
+ // Replace the rendered HTML with the stored text
+ e.innerHTML = e.getAttribute('data-graph');
+ } else {
+ // First time, store the text
+ e.setAttribute('data-graph', e.textContent);
+ }
+ });
+
+ if (isDark) {
+ initMermaidDark();
+ mermaid.run();
+ } else {
+ initMermaidLight();
+ mermaid.run();
+ }
+ }
+}
+
window.addEventListener("DOMContentLoaded", (event) => {
const switcher = document.getElementById("appearance-switcher");
const switcherMobile = document.getElementById("appearance-switcher-mobile");
@@ -29,6 +57,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
updateMeta();
this.updateLogo?.(getTargetAppearance());
+ // Initialize mermaid theme on page load
+ updateMermaidTheme();
+
if (switcher) {
switcher.addEventListener("click", () => {
document.documentElement.classList.toggle("dark");
@@ -38,6 +69,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
targetAppearance
);
updateMeta();
+ updateMermaidTheme();
this.updateLogo?.(targetAppearance);
});
switcher.addEventListener("contextmenu", (event) => {
@@ -54,6 +86,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
targetAppearance
);
updateMeta();
+ updateMermaidTheme();
this.updateLogo?.(targetAppearance);
});
switcherMobile.addEventListener("contextmenu", (event) => {
diff --git a/assets/js/mermaid.js b/assets/js/mermaid.js
index 7df77a21..81f95d5f 100644
--- a/assets/js/mermaid.js
+++ b/assets/js/mermaid.js
@@ -2,30 +2,32 @@ function css(name) {
return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
}
-document.addEventListener("DOMContentLoaded", () => {
- const mermaidDivs = document.querySelectorAll("div.mermaid");
+function initMermaidLight() {
+ mermaid.initialize({
+ theme: "base",
+ themeVariables: {
+ background: css("--color-neutral"),
+ primaryColor: css("--color-primary-200"),
+ secondaryColor: css("--color-secondary-200"),
+ tertiaryColor: css("--color-neutral-100"),
+ primaryBorderColor: css("--color-primary-400"),
+ secondaryBorderColor: css("--color-secondary-400"),
+ tertiaryBorderColor: css("--color-neutral-400"),
+ lineColor: css("--color-neutral-600"),
+ fontFamily:
+ "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
+ fontSize: "16px",
+ },
+ });
+}
- for (const div of mermaidDivs) {
- const preElement = div.querySelector("pre");
- if (preElement) {
- div.textContent = preElement.textContent;
- }
- }
-});
-
-mermaid.initialize({
- theme: "base",
- themeVariables: {
- background: css("--color-neutral"),
- primaryColor: css("--color-primary-200"),
- secondaryColor: css("--color-secondary-200"),
- tertiaryColor: css("--color-neutral-100"),
- primaryBorderColor: css("--color-primary-400"),
- secondaryBorderColor: css("--color-secondary-400"),
- tertiaryBorderColor: css("--color-neutral-400"),
- lineColor: css("--color-neutral-600"),
- fontFamily:
- "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
- fontSize: "16px",
- },
-});
+function initMermaidDark() {
+ mermaid.initialize({
+ theme: "dark",
+ themeVariables: {
+ fontFamily:
+ "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
+ fontSize: "16px",
+ },
+ });
+}
diff --git a/exampleSite/content/samples/diagrams-flowcharts/index.it.md b/exampleSite/content/samples/diagrams-flowcharts/index.it.md
index b8836b8a..0c7b4013 100755
--- a/exampleSite/content/samples/diagrams-flowcharts/index.it.md
+++ b/exampleSite/content/samples/diagrams-flowcharts/index.it.md
@@ -15,7 +15,6 @@ The examples below are a small selection taken from the [official Mermaid docs](
## Flowchart
-
{{< mermaid >}}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
G
end
{{< /mermaid >}}
-
## Sequence diagram
-
{{< mermaid >}}
sequenceDiagram
autonumber
@@ -54,11 +51,9 @@ loop Every minute
John-->Alice: Great!
end
{{< /mermaid >}}
-
## Class diagram
-
{{< mermaid >}}
classDiagram
Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
+run()
}
{{< /mermaid >}}
-
## Entity relationship diagram
-
{{< mermaid >}}
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
{{< /mermaid >}}
-
-
diff --git a/exampleSite/content/samples/diagrams-flowcharts/index.ja.md b/exampleSite/content/samples/diagrams-flowcharts/index.ja.md
index 2b776ccd..487bfe37 100755
--- a/exampleSite/content/samples/diagrams-flowcharts/index.ja.md
+++ b/exampleSite/content/samples/diagrams-flowcharts/index.ja.md
@@ -15,7 +15,6 @@ Mermaid 図は `mermaid` ショートコードを使うことで Blowfish でサ
## フローチャート
-
{{< mermaid >}}
graph TD
A[クリスマス] -->|収入| B(買い物にいく)
@@ -32,11 +31,9 @@ F
G
end
{{< /mermaid >}}
-
## 順序図
-
{{< mermaid >}}
sequenceDiagram
autonumber
@@ -54,11 +51,9 @@ loop 毎分
ジョン-->アリス: すばらしい!
end
{{< /mermaid >}}
-
## クラス図
-
{{< mermaid >}}
classDiagram
Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
+run()
}
{{< /mermaid >}}
-
## 主従関係図
-
{{< mermaid >}}
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
{{< /mermaid >}}
-
-
diff --git a/exampleSite/content/samples/diagrams-flowcharts/index.md b/exampleSite/content/samples/diagrams-flowcharts/index.md
index b8836b8a..0c7b4013 100755
--- a/exampleSite/content/samples/diagrams-flowcharts/index.md
+++ b/exampleSite/content/samples/diagrams-flowcharts/index.md
@@ -15,7 +15,6 @@ The examples below are a small selection taken from the [official Mermaid docs](
## Flowchart
-
{{< mermaid >}}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
G
end
{{< /mermaid >}}
-
## Sequence diagram
-
{{< mermaid >}}
sequenceDiagram
autonumber
@@ -54,11 +51,9 @@ loop Every minute
John-->Alice: Great!
end
{{< /mermaid >}}
-
## Class diagram
-
{{< mermaid >}}
classDiagram
Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
+run()
}
{{< /mermaid >}}
-
## Entity relationship diagram
-
{{< mermaid >}}
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
{{< /mermaid >}}
-
-
diff --git a/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md b/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md
index bd9f9bba..567e7d39 100755
--- a/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md
+++ b/exampleSite/content/samples/diagrams-flowcharts/index.zh-cn.md
@@ -15,7 +15,6 @@ Blowfish 使用 `mermaid` 简码可以调用。Blowfish 会根据配置的 `colo
## 流程图
-
{{< mermaid >}}
graph TD
A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
G
end
{{< /mermaid >}}
-
## 时序图
-
{{< mermaid >}}
sequenceDiagram
autonumber
@@ -54,11 +51,9 @@ loop Every minute
John-->Alice: Great!
end
{{< /mermaid >}}
-
## 类图
-
{{< mermaid >}}
classDiagram
Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
+run()
}
{{< /mermaid >}}
-
## 实体关系图
-
{{< mermaid >}}
erDiagram
CUSTOMER }|..|{ DELIVERY-ADDRESS : has
@@ -98,5 +91,3 @@ ORDER ||--|{ ORDER-ITEM : includes
PRODUCT-CATEGORY ||--|{ PRODUCT : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
{{< /mermaid >}}
-
-
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
index e7d4ef24..940d1a36 100644
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -1,3 +1 @@
-
-
{{ .Inner | safeHTML }}
-
{{ .Inner | safeHTML }}