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

✨ Feat(mermaid): support dark mode

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) => {

assets/js/mermaid.js

@@ -2,30 +2,32 @@ function css(name) {
   return "rgb(" + getComputedStyle(document.documentElement).getPropertyValue(name) + ")";
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+function initMermaidLight() {
-  const mermaidDivs = document.querySelectorAll("div.mermaid");
+  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) {
+function initMermaidDark() {
-    const preElement = div.querySelector("pre");
+  mermaid.initialize({
-    if (preElement) {
+    theme: "dark",
-      div.textContent = preElement.textContent;
+    themeVariables: {
-    }
+      fontFamily:
-  }
+        "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif",
-});
+      fontSize: "16px",
-
+    },
-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",
-  },
-});

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>
-

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>
-

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>
-

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>
-

layouts/shortcodes/mermaid.html

@@ -1,3 +1 @@
-<div class="mermaid" align="center">
+<pre class="not-prose mermaid">{{ .Inner | safeHTML }}</pre>
-  <pre>{{ .Inner | safeHTML }}</pre>
-</div>