From ca18754266fc1da8270bb5e7a9a9dcace3dfc944 Mon Sep 17 00:00:00 2001
From: AnthonyTornetta <cornchipgonecodin@gmail.com>
Date: Sun, 6 Aug 2023 22:14:20 -0400
Subject: Add support for dark theme with mermaid graphs

---
 src/bin/assets/mermaid-init.js | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/bin/assets/mermaid-init.js b/src/bin/assets/mermaid-init.js
index 313a6e8..15a7f4e 100644
--- a/src/bin/assets/mermaid-init.js
+++ b/src/bin/assets/mermaid-init.js
@@ -1 +1,35 @@
-mermaid.initialize({startOnLoad:true});
+(() => {
+    const darkThemes = ['ayu', 'navy', 'coal'];
+    const lightThemes = ['light', 'rust'];
+
+    const classList = document.getElementsByTagName('html')[0].classList;
+
+    let lastThemeWasLight = true;
+    for (const cssClass of classList) {
+        if (darkThemes.includes(cssClass)) {
+            lastThemeWasLight = false;
+            break;
+        }
+    }
+
+    const theme = lastThemeWasLight ? 'default' : 'dark';
+    mermaid.initialize({ startOnLoad: true, theme });
+
+    // Simplest way to make mermaid re-render the diagrams in the new theme is via refreshing the page
+
+    for (const darkTheme of darkThemes) {
+        document.getElementById(darkTheme).addEventListener('click', () => {
+            if (lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+
+    for (const lightTheme of lightThemes) {
+        document.getElementById(lightTheme).addEventListener('click', () => {
+            if (!lastThemeWasLight) {
+                window.location.reload();
+            }
+        });
+    }
+})();
-- 
cgit v1.2.3