Merge pull request #2533 from ZhenShuo2021/feat/mermaid-dark

✨ Feat(mermaid): support dark mode
2026-01-30 16:31:52 +01:00 · 2025-10-14 10:08:26 +01:00
parent 7f4e044464 925065a5bd
commit 01dafef575
7 changed files with 62 additions and 65 deletions
--- 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) => {
--- 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",
+    },
+  });
+}
--- 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

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>

 ## Sequence diagram

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
-</div>

 ## Class diagram

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>

 ## Entity relationship diagram

-<div style="background-color:white; padding: 20px">
 {{< 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 >}}
-</div>
-
--- 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 でサ

 ## フローチャート

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[クリスマス] -->|収入| B(買い物にいく)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>

 ## 順序図

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop 毎分
 ジョン-->アリス: すばらしい!
 end
 {{< /mermaid >}}
-</div>

 ## クラス図

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>

 ## 主従関係図

-<div style="background-color:white; padding: 20px">
 {{< 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 >}}
-</div>
-
--- 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

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>

 ## Sequence diagram

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
-</div>

 ## Class diagram

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>

 ## Entity relationship diagram

-<div style="background-color:white; padding: 20px">
 {{< 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 >}}
-</div>
-
--- 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

 ## 流程图

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 graph TD
 A[Christmas] -->|Get money| B(Go shopping)
@@ -32,11 +31,9 @@ F
 G
 end
 {{< /mermaid >}}
-</div>

 ## 时序图

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 sequenceDiagram
 autonumber
@@ -54,11 +51,9 @@ loop Every minute
 John-->Alice: Great!
 end
 {{< /mermaid >}}
-</div>

 ## 类图

-<div style="background-color:white; padding: 20px">
 {{< mermaid >}}
 classDiagram
 Animal "1" <|-- Duck
@@ -82,11 +77,9 @@ class Zebra{
 +run()
 }
 {{< /mermaid >}}
-</div>

 ## 实体关系图

-<div style="background-color:white; padding: 20px">
 {{< 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 >}}
-</div>
-
--- a/layouts/shortcodes/mermaid.html
+++ b/layouts/shortcodes/mermaid.html
@@ -1,3 +1 @@
-<div class="mermaid" align="center">
-  <pre>{{ .Inner | safeHTML }}</pre>
-</div>
+<pre class="not-prose mermaid">{{ .Inner | safeHTML }}</pre>