Merge 4ae3d00387 into c7fb163e66

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())

assets/scripts/features/flowchart/mermaid.js

@@ -1,7 +1,91 @@
 import mermaid from 'mermaid'
 import * as params from '@params'
 
-const mermaidOptions = params.flowchart?.mermaid || {}
+const elementCode = '.mermaid'
-const options = Object.assign({}, mermaidOptions, { startOnLoad: true })
 
-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 });
+
+    // 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 }

exampleSite/hugo.yaml

@@ -240,12 +240,13 @@ params:
 
     # Enable this to create flowcharts using shortcodes.
     flowchart:
-      enable: false
+      enable: true
       services:
         # 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: