From 1fbc4d813377a91842b92f61aee8d9586a2d8c36 Mon Sep 17 00:00:00 2001
From: nazeh <ar.nazeh@gmail.com>
Date: Mon, 9 Sep 2024 15:17:56 +0300
Subject: [PATCH] docs: support mermaid in darkmode

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

diff --git a/docs/mermaid-init.js b/docs/mermaid-init.js
index 313a6e8..0dd3657 100644
--- a/docs/mermaid-init.js
+++ b/docs/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();
+      }
+    });
+  }
+})();