fix: patch beta diagram colors via JS — setAttribute overrides inline SVG fills (CSS !important fails)

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)
 // ---------------------------------------------------------------------------