feat: Mermaid dark theme with custom themeVariables + re-render on switch + fix code view colors

frontend/js/mermaid-viewer.js

@@ -35,10 +35,39 @@ export function updateMermaidTheme(isDark) {
     mermaid.initialize({
       startOnLoad: false,
       securityLevel: 'strict',
-      theme: _currentTheme,
+      theme: isDark ? 'base' : 'base',
+      themeVariables: isDark ? {
+        primaryColor: '#3b3b5c',
+        primaryTextColor: '#e0e0f0',
+        primaryBorderColor: '#5a5a8a',
+        lineColor: '#8a8aaa',
+        secondaryColor: '#2d2d48',
+        tertiaryColor: '#1e1e32',
+        background: '#1a1a2e',
+        mainBkg: '#2a2a40',
+        nodeBorder: '#5a5a8a',
+        clusterBkg: '#22223a',
+        clusterBorder: '#4a4a7a',
+        titleColor: '#c0c0e0',
+        edgeLabelBackground: '#2a2a40',
+        nodeTextColor: '#e0e0f0',
+      } : {
+        primaryColor: '#f0f0f5',
+        primaryTextColor: '#1a1a2e',
+        primaryBorderColor: '#ccc',
+        lineColor: '#666',
+        secondaryColor: '#e8e8f0',
+        tertiaryColor: '#fafafa',
+      },
       fontFamily: 'inherit',
     });
   }
+
+  // Re-render all existing Mermaid containers with the new theme
+  var containers = document.querySelectorAll('.mermaid-container');
+  for (var i = 0; i < containers.length; i++) {
+    reRenderContainer(containers[i]);
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -239,6 +268,34 @@ function extractDiagramType(code) {
   return 'mermaid';
 }
 
+// ---------------------------------------------------------------------------
+// Re-render a container after theme change
+// ---------------------------------------------------------------------------
+
+async function reRenderContainer(container) {
+  var code = container.getAttribute('data-mermaid-code');
+  if (!code) return;
+
+  var rendered = container.querySelector('.mermaid-rendered');
+  if (!rendered) return;
+
+  try {
+    var id = 'mermaid-' + (++_renderCounter) + '-' + Date.now();
+    var result = await mermaid.render(id, preprocessObsidian(code));
+    rendered.innerHTML = result.svg;
+
+    // Reset zoom/pan state on the SVG
+    var svg = rendered.querySelector('svg');
+    if (svg) {
+      svg.style.transform = '';
+      svg.style.cursor = 'grab';
+    }
+  } catch (err) {
+    // Keep old rendering on error
+    console.warn('[Mermaid] Re-render failed:', err.message);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Zoom & Pan (#27)
 // ---------------------------------------------------------------------------

frontend/style.css

@@ -7633,7 +7633,7 @@ body.popup-mode .content-area {
 .mermaid-header {
   display: flex; align-items: center; justify-content: space-between;
   padding: 6px 10px;
-  background: var(--bg-tertiary, #f0f0f5);
+  background: var(--bg-hover);
   border-bottom: 1px solid var(--border);
   min-height: 34px;
 }
@@ -7690,9 +7690,10 @@ body.popup-mode .content-area {
 .mermaid-source { padding: 16px; overflow: auto; }
 .mermaid-source pre {
   margin: 0; padding: 12px;
-  background: var(--bg-tertiary, #f5f5f5);
+  background: var(--code-bg);
   border-radius: 4px;
   font-size: 0.78rem; line-height: 1.5;
+  color: var(--text-primary);
 }
 
 /* ── Error ── */