From 7a71dd87244820e00f9ec867c0d08ccbb2a9ddfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bernat=20Borr=C3=A0s=20Civil?=
 <70479573+BernatBC@users.noreply.github.com>
Date: Mon, 24 Mar 2025 19:04:22 +0100
Subject: [PATCH] Allow different mermaid theme on dark mode

---
 assets/scripts/features/darkmode/index.js    |  4 +
 assets/scripts/features/flowchart/mermaid.js | 93 +++++++++++++++++++-
 exampleSite/hugo.yaml                        |  3 +-
 3 files changed, 96 insertions(+), 4 deletions(-)

diff --git a/assets/scripts/features/darkmode/index.js b/assets/scripts/features/darkmode/index.js
index 5d8443e..86b265a 100644
--- a/assets/scripts/features/darkmode/index.js
+++ b/assets/scripts/features/darkmode/index.js
@@ -1,3 +1,5 @@
+import { setMermaidTheme } from '../flowchart/mermaid.js'
+
 const PERSISTENCE_KEY = 'darkmode:color-scheme'
 
 window.addEventListener('load', async () => {
@@ -41,6 +43,8 @@ window.addEventListener('load', async () => {
     saveScheme(newScheme)
 
     setImages(theme)
+
+    setMermaidTheme(theme)
   }
 
   setScheme(loadScheme())
diff --git a/assets/scripts/features/flowchart/mermaid.js b/assets/scripts/features/flowchart/mermaid.js
index e8b3e4d..99fd14d 100644
--- a/assets/scripts/features/flowchart/mermaid.js
+++ b/assets/scripts/features/flowchart/mermaid.js
@@ -1,7 +1,94 @@
 import mermaid from 'mermaid'
 import * as params from '@params'
 
-const mermaidOptions = params.flowchart?.mermaid || {}
-const options = Object.assign({}, mermaidOptions, { startOnLoad: true })
+const elementCode = '.mermaid'
 
-mermaid.initialize(options)
+initMermaid();
+
+// Save original mermaid code to data attribute
+function saveOriginalData() {
+    return new Promise((resolve, reject) => {
+        try {
+            const elements = document.querySelectorAll(elementCode);
+            let count = elements.length;
+            
+            if (count === 0) {
+                resolve();
+                return;
+            }
+            
+            elements.forEach(element => {
+                element.setAttribute('data-original-code', element.innerHTML);
+                count--;
+                if (count === 0) {
+                    resolve();
+                }
+            });
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
+
+// Reset processed diagrams to original state
+function resetProcessed() {
+    return new Promise((resolve, reject) => {
+        try {
+            const elements = document.querySelectorAll(elementCode);
+            let count = elements.length;
+            
+            if (count === 0) {
+                resolve();
+                return;
+            }
+            
+            elements.forEach(element => {
+                if (element.getAttribute('data-original-code') != null) {
+                    element.removeAttribute('data-processed');
+                    element.innerHTML = element.getAttribute('data-original-code');
+                }
+                count--;
+                if (count === 0) {
+                    resolve();
+                }
+            });
+        } catch (error) {
+            reject(error);
+        }
+    });
+}
+
+function setMermaidTheme(siteTheme) {
+    let themeName = 'default';
+
+    if (siteTheme === 'dark') themeName = 'dark';
+
+    // Set custom theme
+    if (themeName === 'default' && params.flowchart?.mermaid['theme']) {
+        themeName = params.flowchart?.mermaid['theme'];
+    }
+    else if (themeName === 'dark' && params.flowchart?.mermaid['darktheme']) {
+        themeName = params.flowchart?.mermaid['darktheme'];
+    }
+    const mermaidOptions = { theme: themeName };
+    const options = Object.assign({}, mermaidOptions, { startOnLoad: true });
+    console.log(themeName);
+    console.log(params.flowchart?.mermaid);
+    console.log(mermaidOptions);
+
+    // Initialize mermaid with the new options
+    mermaid.initialize(options);
+    
+    // Reload diagrams if they exist on the page
+    resetProcessed()
+        .then(() => {
+            mermaid.init(options, document.querySelectorAll(elementCode));
+        })
+        .catch(console.error);
+}
+
+function initMermaid() {
+    saveOriginalData().catch(console.error);
+}
+
+export { setMermaidTheme }
\ No newline at end of file
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index ee01e39..e2572cd 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -245,7 +245,8 @@ params:
         # Uncomment for `mermaid` shortcode.
         mermaid:
           # For config options, see: https://mermaid-js.github.io/mermaid/#/Setup?id=configuration
-          # theme: dark
+          # theme: default
+          # darkTheme: dark
 
     # Enable this to create mathematic expressions using `$$` blocks
     math: