From: Alexander Wilms <redacted>
Date: Thu, 26 Jun 2025 23:37:42 +0000 (+0200)
Subject: feat(mermaid-viewer): Improve button styles for light/dark modes
X-Git-Url: http://source.bookstackapp.com/hacks/commitdiff_plain/aecb3a29e507bfdcd7ec043b91cfa59f86b86b05

feat(mermaid-viewer): Improve button styles for light/dark modes
---

diff --git a/content/mermaid-viewer/head.html b/content/mermaid-viewer/head.html
index b2c3383..e0c084e 100644
--- a/content/mermaid-viewer/head.html
+++ b/content/mermaid-viewer/head.html
@@ -520,30 +520,41 @@
     }
 
     .mermaid-viewer-button-base {
-        border: 1px solid #d0d7de;
+        background: #FFFFFF;
+        border: 1px solid #C0C0C0;
         border-radius: 6px;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         user-select: none;
-        background: var(--color-bg);
         width: 32px;
         height: 32px;
         color: var(--color-text);
+        /* The above color is overridden in dark mode below to ensure visibility */
     }
 
     .mermaid-viewer-button-base:hover {
-        background: #f6f8fa;
+        background: #C8C8C8;
     }
 
-    .dark-mode .mermaid-viewer-button-base:hover {
-        background: var(--color-bg-alt);
+    .dark-mode .mermaid-viewer-button-base {
+        background: #282828;
+        border: 1px solid #444444;
+        border-radius: 6px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        width: 32px;
+        height: 32px;
+        color: #FFFFFF;
+        /* Explicitly set to white for dark mode icons */
     }
 
-    /* Override for pure white icons in dark mode */
-    .dark-mode .mermaid-viewer-button-base {
-        color: #fff;
+    .dark-mode .mermaid-viewer-button-base:hover {
+        background: #383838;
     }
 
     .mermaid-zoom-controls {