From bd34a5bad3c43a9d32e026e2b3c76952f9ec9dfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torbj=C3=B8rn=20Pedersen?=
 <113333557+torbjornbp@users.noreply.github.com>
Date: Sun, 8 Dec 2024 13:29:28 +0100
Subject: [PATCH] fix: rerender mermaid diagrams on theme change (#509)

Make mermaid render diagrams on manual toggle between themes, after initial page load
---
 layouts/partials/scripts.html | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 026b3445..03d5926c 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -37,9 +37,32 @@
   {{- $mermaidJS := resources.Get "lib/mermaid/mermaid.min.js" | fingerprint -}}
   <script defer src="{{ $mermaidJS.RelPermalink }}" integrity="{{ $mermaidJS.Data.Integrity }}"></script>
   <script>
-    document.addEventListener("DOMContentLoaded", function () {
+    document.addEventListener("DOMContentLoaded", () => {
+      // Store original mermaid code for each diagram
+      document.querySelectorAll(".mermaid").forEach(el => {
+        el.dataset.original = el.innerHTML;
+      });
+
       const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
       mermaid.initialize({ startOnLoad: true, theme: theme });
+
+      let timeout;
+      new MutationObserver(() => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          const theme = document.documentElement.classList.contains("dark") ? "dark" : "default";
+          document.querySelectorAll(".mermaid").forEach(el => {
+            // Reset to original content, preserving HTML
+            el.innerHTML = el.dataset.original;
+            el.removeAttribute("data-processed");
+          });
+          mermaid.initialize({ startOnLoad: true, theme: theme });
+          mermaid.init();
+        }, 150);
+      }).observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ["class"]
+      });
     });
   </script>
 {{- end -}}