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 b2c338321c6bba8adb0d83e89cc0f269ed1ea593..e0c084e53cc103b60e7ef27d0ace6c4d6fd55c38 100644 (file)
--- 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 {