From: Alexander Wilms <redacted>
Date: Thu, 26 Jun 2025 21:58:48 +0000 (+0200)
Subject: feat(mermaid-viewer): Improve theme integration and styling
X-Git-Url: http://source.bookstackapp.com/hacks/commitdiff_plain/c36325aec1f151269a38e1ee87f8cacbe5e3b3e5

feat(mermaid-viewer): Improve theme integration and styling

Use BookStack's CSS variables and detect dark mode for Mermaid theme.
Replaces custom styles with BookStack's for better consistency.
---

diff --git a/content/mermaid-viewer/head.html b/content/mermaid-viewer/head.html
index 8c8d4fb..e830658 100644
--- a/content/mermaid-viewer/head.html
+++ b/content/mermaid-viewer/head.html
@@ -3,10 +3,14 @@
     crossorigin="anonymous" referrerpolicy="no-referrer" />
 <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
 <script type="module">
+    // Detect if BookStack's dark mode is enabled
+    const isDarkMode = document.documentElement.classList.contains('dark-mode');
+
+    // Initialize Mermaid.js, dynamically setting the theme based on BookStack's mode
     mermaid.initialize({
         startOnLoad: false,
         securityLevel: 'loose',
-        theme: 'default'
+        theme: isDarkMode ? 'dark' : 'default'
     });
 
     // Zoom Level Configuration
@@ -17,7 +21,6 @@
 
     const DRAG_THRESHOLD_PIXELS = 3;
     const ZOOM_ANIMATION_CLASS_TIMEOUT_MS = 200;
-    const NOTIFICATION_DISPLAY_TIMEOUT_MS = 2000;
 
     const CSS_CLASSES = {
         CONTAINER: 'mermaid-container',
@@ -441,8 +444,9 @@
 
 </script>
 <style>
+    /* Use BookStack's CSS variables for seamless theme integration */
     .mermaid-container {
-        background: white;
+        background: var(--color-bg-alt);
         border: 1px solid #d0d7de;
         border-radius: 6px;
         position: relative;
@@ -515,16 +519,21 @@
         align-items: center;
         justify-content: center;
         user-select: none;
-        background: rgba(255, 255, 255, 0.9);
+        background: var(--color-bg);
         width: 32px;
         height: 32px;
-        color: #24292f;
+        color: var(--color-text);
     }
 
     .mermaid-viewer-button-base:hover {
         background: #f6f8fa;
     }
 
+    /* Override for pure white icons in dark mode */
+    .dark-mode .mermaid-viewer-button-base {
+        color: #fff;
+    }
+
     .mermaid-zoom-controls {
         position: absolute;
         bottom: 10px;