diff --git a/.gitignore b/.gitignore
index 220be72..1ba088e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,3 +13,4 @@ build/
 config.json
 data/
 .coverage
+.coverage
diff --git a/frontend/js/ui.js b/frontend/js/ui.js
index c6c9df9..13caf2d 100644
--- a/frontend/js/ui.js
+++ b/frontend/js/ui.js
@@ -163,6 +163,11 @@ export function applyTheme(theme) {
     darkSheet.disabled = theme !== "dark";
     lightSheet.disabled = theme !== "light";
   }
+
+  // Update Mermaid theme for newly rendered diagrams
+  import('./mermaid-viewer.js').then(function(m) {
+    m.updateMermaidTheme(theme === 'dark');
+  }).catch(function() {});
 }
 
 export function toggleTheme() {
diff --git a/frontend/style.css b/frontend/style.css
index 3e0517b..bfc6ef3 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -7706,25 +7706,53 @@ body.popup-mode .content-area {
 /* ── Fullscreen ── */
 .mermaid-fullscreen-overlay {
   position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-  z-index: 10000; background: rgba(0,0,0,0.92);
+  z-index: 10000;
   display: flex; flex-direction: column;
 }
+/* Light theme — clean white like the example */
+[data-theme="light"] .mermaid-fullscreen-overlay {
+  background: rgba(255,255,255,0.97);
+}
+[data-theme="light"] .mermaid-fullscreen-header {
+  background: rgba(0,0,0,0.03);
+  border-bottom: 1px solid rgba(0,0,0,0.08);
+}
+[data-theme="light"] .mermaid-fullscreen-header .mermaid-diagram-type {
+  color: rgba(0,0,0,0.5);
+}
+[data-theme="light"] .mermaid-fullscreen-header .mermaid-btn {
+  color: rgba(0,0,0,0.4);
+}
+[data-theme="light"] .mermaid-fullscreen-header .mermaid-btn:hover {
+  background: rgba(0,0,0,0.05);
+  color: rgba(0,0,0,0.8);
+}
+
+/* Dark theme */
+[data-theme="dark"] .mermaid-fullscreen-overlay {
+  background: rgba(18,18,24,0.97);
+}
+[data-theme="dark"] .mermaid-fullscreen-header {
+  background: rgba(255,255,255,0.06);
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+[data-theme="dark"] .mermaid-fullscreen-header .mermaid-diagram-type {
+  color: rgba(255,255,255,0.7);
+}
+[data-theme="dark"] .mermaid-fullscreen-header .mermaid-btn {
+  color: rgba(255,255,255,0.6);
+}
+[data-theme="dark"] .mermaid-fullscreen-header .mermaid-btn:hover {
+  background: rgba(255,255,255,0.1);
+  color: #fff;
+}
+
 .mermaid-fullscreen-header {
   display: flex; align-items: center; justify-content: space-between;
   padding: 10px 16px;
-  background: rgba(255,255,255,0.06);
-  border-bottom: 1px solid rgba(255,255,255,0.08);
   min-height: 46px;
   flex-shrink: 0;
 }
-.mermaid-fullscreen-header .mermaid-diagram-type { color: rgba(255,255,255,0.7); }
-.mermaid-fullscreen-header .mermaid-btn {
-  color: rgba(255,255,255,0.6);
-}
-.mermaid-fullscreen-header .mermaid-btn:hover {
-  background: rgba(255,255,255,0.1);
-  color: #fff;
-}
 .mermaid-fullscreen-content {
   flex: 1;
   display: flex; align-items: center; justify-content: center;