feat: comprehensive Mermaid dark theme — bleu-tinted palette for flowchart, gantt, git, mindmap, pie

frontend/js/mermaid-viewer.js

@@ -20,47 +20,14 @@ export function initMermaid() {
     console.warn('[Mermaid] library not loaded');
     return;
   }
-  mermaid.initialize({
+  mermaid.initialize(_getMermaidConfig(_currentTheme === 'dark'));
-    startOnLoad: false,
-    securityLevel: 'strict',
-    theme: _currentTheme,
-    fontFamily: 'inherit',
-  });
   _mermaidReady = true;
 }
 
 export function updateMermaidTheme(isDark) {
   _currentTheme = isDark ? 'dark' : 'default';
   if (_mermaidReady) {
-    mermaid.initialize({
+    mermaid.initialize(_getMermaidConfig(isDark));
-      startOnLoad: false,
-      securityLevel: 'strict',
-      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
@@ -70,6 +37,132 @@ export function updateMermaidTheme(isDark) {
   }
 }
 
+// Unified theme config — used by both init and theme toggle
+function _getMermaidConfig(isDark) {
+  return {
+    startOnLoad: false,
+    securityLevel: 'strict',
+    theme: 'base',
+    fontFamily: 'inherit',
+    themeVariables: isDark ? DARK_THEME : LIGHT_THEME,
+  };
+}
+
+// Dark theme — optimized for readability on dark backgrounds
+var DARK_THEME = {
+  // Flowchart / general shapes
+  primaryColor: '#1e3a5f',
+  primaryTextColor: '#c8daf0',
+  primaryBorderColor: '#4a7ab5',
+  lineColor: '#5a7a9a',
+  secondaryColor: '#1a2d47',
+  tertiaryColor: '#142236',
+  // Background & containers
+  background: '#0f1117',
+  mainBkg: '#1a2030',
+  nodeBorder: '#4a7ab5',
+  clusterBkg: '#1a2235',
+  clusterBorder: '#3a5a80',
+  titleColor: '#a0c0e0',
+  edgeLabelBackground: '#1a2d47',
+  nodeTextColor: '#c8daf0',
+  // Sequence diagram
+  actorBkg: '#1e3a5f',
+  actorBorder: '#4a7ab5',
+  actorTextColor: '#c8daf0',
+  actorLineColor: '#4a7ab5',
+  signalColor: '#c8daf0',
+  signalTextColor: '#c8daf0',
+  labelBoxBkgColor: '#1e3a5f',
+  labelBoxBorderColor: '#4a7ab5',
+  labelTextColor: '#c8daf0',
+  loopTextColor: '#c8daf0',
+  noteBkgColor: '#2a3550',
+  noteBorderColor: '#4a7ab5',
+  noteTextColor: '#c8daf0',
+  activationBkgColor: '#3a5a80',
+  // Gantt
+  sectionBkgColor: '#1a2d47',
+  altSectionBkgColor: '#1e3350',
+  sectionBkgColor2: '#1a2d47',
+  taskBkgColor: '#1e3a5f',
+  taskBorderColor: '#4a7ab5',
+  taskTextColor: '#c8daf0',
+  taskTextOutsideColor: '#8aacca',
+  taskTextLightColor: '#e0e8f0',
+  gridColor: '#2a3a55',
+  activeTaskBkgColor: '#2a5a8a',
+  activeTaskBorderColor: '#6a9ad0',
+  doneTaskBkgColor: '#1a3a4f',
+  doneTaskBorderColor: '#3a7a9a',
+  critBkgColor: '#5a2a3a',
+  critBorderColor: '#a04050',
+  todayLineColor: '#4a7ab5',
+  // Git graph
+  git0: '#4a7ab5',
+  git1: '#3a6a9a',
+  git2: '#5a8ac0',
+  git3: '#2a5a8a',
+  git4: '#6a9ad0',
+  git5: '#3a7aaa',
+  git6: '#4a8abf',
+  git7: '#5a9acf',
+  gitInv0: '#c8daf0',
+  gitInv1: '#b0c8e0',
+  gitInv2: '#d0e0f0',
+  gitInv3: '#a0b8d0',
+  gitBranchLabel0: '#c8daf0',
+  gitBranchLabel1: '#b0c8e0',
+  gitBranchLabel2: '#d0e0f0',
+  commitLabelColor: '#c8daf0',
+  commitLabelBackground: '#1e3a5f',
+  commitLabelFontSize: '11px',
+  tagLabelColor: '#a0c0e0',
+  tagLabelBackground: '#1a2d47',
+  tagLabelBorder: '#4a7ab5',
+  // Pie chart
+  pie1: '#1e3a5f',
+  pie2: '#2a5a8a',
+  pie3: '#153050',
+  pie4: '#3a6a9a',
+  pie5: '#204070',
+  pie6: '#4a7ab5',
+  pie7: '#255080',
+  pie8: '#5a8ac0',
+  pieTitleTextColor: '#c8daf0',
+  pieSectionTextColor: '#c8daf0',
+  pieLegendTextColor: '#a0c0e0',
+  pieStrokeColor: '#0f1117',
+  // Class diagram
+  classText: '#c8daf0',
+  // State diagram
+  labelColor: '#c8daf0',
+  // ER diagram
+  attributeEvenColor: '#c8daf0',
+  // General text
+  textColor: '#c8daf0',
+  fontSize: '14px',
+};
+
+// Light theme — clean, minimal
+var LIGHT_THEME = {
+  primaryColor: '#f0f0f5',
+  primaryTextColor: '#1a1a2e',
+  primaryBorderColor: '#ccc',
+  lineColor: '#666',
+  secondaryColor: '#e8e8f0',
+  tertiaryColor: '#fafafa',
+  background: '#ffffff',
+  mainBkg: '#f5f5fa',
+  nodeBorder: '#ccc',
+  clusterBkg: '#f0f0f5',
+  clusterBorder: '#ddd',
+  titleColor: '#333',
+  edgeLabelBackground: '#f5f5fa',
+  nodeTextColor: '#1a1a2e',
+  fontSize: '14px',
+};
+
 // ---------------------------------------------------------------------------
 // Templates for all diagram types (#22)
 // ---------------------------------------------------------------------------