From 1264f54a956fd96e69ba9389847751bd013814db Mon Sep 17 00:00:00 2001
From: Patrice Chalin <pchalin@gmail.com>
Date: Tue, 30 Apr 2024 06:15:16 -0400
Subject: [PATCH] Set Mermaid theme based on light/dark mode

---
 layouts/partials/scripts/mermaid.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/layouts/partials/scripts/mermaid.html b/layouts/partials/scripts/mermaid.html
index b59398522..36446c91b 100644
--- a/layouts/partials/scripts/mermaid.html
+++ b/layouts/partials/scripts/mermaid.html
@@ -39,6 +39,28 @@
 
     var settings = norm(mermaid.mermaidAPI.defaultConfig, params);
     settings.startOnLoad = true;
+    const isDark = $('html[data-bs-theme="dark"]').length;
+    settings.theme = isDark ? 'dark' : 'base';
     mermaid.initialize(settings);
+
+    // Handle light/dark mode theme changes
+    const lightDarkModeThemeChangeHandler = function (mutationsList, observer) {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+          // Mermaid doesn't currently support reinitialization, see
+          // https://github.com/mermaid-js/mermaid/issues/1945. Until then,
+          // just reload the page.
+          location.reload();
+        }
+      }
+    };
+
+    const observer = new MutationObserver(lightDarkModeThemeChangeHandler);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-bs-theme']
+    });
+    // observer.disconnect();
+
   })(jQuery);
 </script>