From b21ac7e71d4b18d582d29aaa10e4fa172ec6d0d5 Mon Sep 17 00:00:00 2001
From: HidegonSan <68275072+HidegonSan@users.noreply.github.com>
Date: Wed, 29 Nov 2023 23:07:00 +0900
Subject: [PATCH] support mermaid darktheme

---
 layouts/partials/head/mermaid.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/head/mermaid.html b/layouts/partials/head/mermaid.html
index e087f11..ee38b48 100644
--- a/layouts/partials/head/mermaid.html
+++ b/layouts/partials/head/mermaid.html
@@ -15,15 +15,31 @@
 
     <script>
         document.addEventListener("DOMContentLoaded", async function() {
-            mermaid.initialize({ startOnLoad: false })
+            let mermaid_theme = "default";
+
+            if (localStorage.getItem("pref-theme") === "dark") {
+                mermaid_theme = "dark"
+            } else if (localStorage.getItem("pref-theme") === "light") {
+                mermaid_theme = "default"
+            } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                mermaid_theme = "dark"
+            }
+
+            mermaid.initialize({
+                theme: mermaid_theme,
+                startOnLoad: false
+            })
+
             await mermaid.run({
                 querySelector: ".language-mermaid, .mermaid",
                 suppressErrors: true,
             })
+
             document.querySelectorAll(".language-mermaid").forEach(function(e) {
                 e.style.cssText += "background: none !important; text-align: center;"
                 e.nextElementSibling.style.cssText += "display: none !important;"
             })
+
             document.querySelectorAll(".mermaid").forEach(function(e) {
                 e.style.cssText += "text-align: center;"
             })