From 0f1ae237a0adf47477c67597206800f8a7107b8b Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Fri, 5 Jun 2026 13:11:50 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20patch=20beta=20diagram=20colors=20via=20?=
 =?UTF-8?q?JS=20=E2=80=94=20setAttribute=20overrides=20inline=20SVG=20fill?=
 =?UTF-8?q?s=20(CSS=20!important=20fails)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/js/mermaid-viewer.js | 61 +++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/frontend/js/mermaid-viewer.js b/frontend/js/mermaid-viewer.js
index 5d09c34..ff4437a 100644
--- a/frontend/js/mermaid-viewer.js
+++ b/frontend/js/mermaid-viewer.js
@@ -300,6 +300,8 @@ export async function renderMermaidBlocks(container) {
       wireHeaderButtons(containerDiv, originalCode);
       setupZoomPan(containerDiv);
       setupCodePreviewToggle(containerDiv);
+      // Patch beta diagram colors for dark mode
+      if (_currentTheme === 'dark') patchBetaColors(containerDiv, diagramType);
       safeCreateIcons();
     } catch (err) {
       var errorDiv = document.createElement('div');
@@ -420,12 +422,71 @@ async function reRenderContainer(container) {
       svg.style.transform = '';
       svg.style.cursor = 'grab';
     }
+    // Patch beta diagram colors for dark mode
+    if (_currentTheme === 'dark') {
+      var diagramType = extractDiagramType(code);
+      patchBetaColors(container, diagramType);
+    }
   } catch (err) {
     // Keep old rendering on error
     console.warn('[Mermaid] Re-render failed:', err.message);
   }
 }
 
+// ---------------------------------------------------------------------------
+// Patch beta diagram colors for dark mode (inline SVG attributes beat CSS)
+// ---------------------------------------------------------------------------
+
+function patchBetaColors(container, diagramType) {
+  var svg = container.querySelector('.mermaid-rendered svg');
+  if (!svg) return;
+
+  // packet-beta — override white block backgrounds
+  if (diagramType.indexOf('packet') !== -1) {
+    var rects = svg.querySelectorAll('rect');
+    for (var i = 0; i < rects.length; i++) {
+      var r = rects[i];
+      var fill = r.getAttribute('fill');
+      // Only override if the fill is light/white (preserve dark fills)
+      if (!fill || fill === '#f4f4f4' || fill === '#fff' || fill === '#ffffff' || fill === 'white' || fill === '#e8e8e8') {
+        r.setAttribute('fill', '#1e3a5f');
+        r.setAttribute('stroke', '#4a7ab5');
+      }
+    }
+    // Text color
+    var texts = svg.querySelectorAll('text');
+    for (var j = 0; j < texts.length; j++) {
+      var t = texts[j];
+      var tfill = t.getAttribute('fill');
+      if (!tfill || tfill === '#000' || tfill === '#333' || tfill === 'black') {
+        t.setAttribute('fill', '#c8daf0');
+      }
+    }
+  }
+
+  // xychart-beta — override cream bars and orange line
+  if (diagramType.indexOf('xychart') !== -1) {
+    var allRects = svg.querySelectorAll('rect');
+    for (var k = 0; k < allRects.length; k++) {
+      var rr = allRects[k];
+      var f = rr.getAttribute('fill');
+      if (!f || f === '#f4f4f4' || f === '#fff' || f === '#ffffff' || f === 'white' || f.indexOf('cream') !== -1 || f === '#ececec') {
+        rr.setAttribute('fill', '#1e3a5f');
+        rr.setAttribute('stroke', '#4a7ab5');
+      }
+    }
+    // Line color
+    var paths = svg.querySelectorAll('path');
+    for (var m = 0; m < paths.length; m++) {
+      var p = paths[m];
+      var ps = p.getAttribute('stroke');
+      if (!ps || ps === '#ffa500' || ps === 'orange' || ps === '#ff8c00') {
+        p.setAttribute('stroke', '#6a9ad0');
+      }
+    }
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Zoom & Pan (#27)
 // ---------------------------------------------------------------------------