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 8c8d4fb40a2750db69a15bd1b25acf32482ccd55..e83065898e02f49408159596c67565d54c45815c 100644 (file)
--- 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">
     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',
     mermaid.initialize({
         startOnLoad: false,
         securityLevel: 'loose',

-        theme: 'default'
+        theme: isDarkMode ? 'dark' : 'default'

     });
 
     // Zoom Level Configuration
     });
 
     // Zoom Level Configuration


@@ -17,7 +21,6 @@
 
     const DRAG_THRESHOLD_PIXELS = 3;
     const ZOOM_ANIMATION_CLASS_TIMEOUT_MS = 200;
 
     const DRAG_THRESHOLD_PIXELS = 3;
     const ZOOM_ANIMATION_CLASS_TIMEOUT_MS = 200;

-    const NOTIFICATION_DISPLAY_TIMEOUT_MS = 2000;

 
     const CSS_CLASSES = {
         CONTAINER: 'mermaid-container',
 
     const CSS_CLASSES = {
         CONTAINER: 'mermaid-container',


@@ -441,8 +444,9 @@
 
 </script>
 <style>
 
 </script>
 <style>

+    /* Use BookStack's CSS variables for seamless theme integration */

     .mermaid-container {
     .mermaid-container {

-        background: white;
+        background: var(--color-bg-alt);

         border: 1px solid #d0d7de;
         border-radius: 6px;
         position: relative;
         border: 1px solid #d0d7de;
         border-radius: 6px;
         position: relative;


@@ -515,16 +519,21 @@
         align-items: center;
         justify-content: center;
         user-select: none;
         align-items: center;
         justify-content: center;
         user-select: none;

-        background: rgba(255, 255, 255, 0.9);
+        background: var(--color-bg);

         width: 32px;
         height: 32px;
         width: 32px;
         height: 32px;

-        color: #24292f;
+        color: var(--color-text);

     }
 
     .mermaid-viewer-button-base:hover {
         background: #f6f8fa;
     }
 
     }
 
     .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;
     .mermaid-zoom-controls {
         position: absolute;
         bottom: 10px;