fix: fullscreen diagram export background color mismatch

nicobailon · nicobailon · commit e813cc3f56ef · 2026-03-08T15:50:18.000-07:00
Use the same isDark value from Mermaid render time instead of
re-checking CSS variables. Fixes white-on-white text when
exporting dark-mode diagrams.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## [0.6.2] - 2026-03-08
+
+### Bug Fixes
+- Fixed fullscreen diagram export using wrong background color — now uses the same dark/light mode that was used to render the Mermaid theme
+
 ## [0.6.1] - 2026-03-08
 
 ### Pi Install Script
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "visual-explainer",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "description": "Agent skill that generates beautiful HTML pages for diagrams, diff reviews, plan reviews, and data tables",
   "keywords": [
     "claude-code-plugin",
diff --git a/plugins/visual-explainer/templates/mermaid-flowchart.html b/plugins/visual-explainer/templates/mermaid-flowchart.html
@@ -567,8 +567,9 @@ <h1 class="animate" style="--i:0">CI/CD Pipeline</h1>
       clone.style.width = '';
       clone.style.height = '';
 
-      const bg = getComputedStyle(document.documentElement)
-        .getPropertyValue('--bg').trim() || '#ffffff';
+      // Use the same isDark value that was used to render the Mermaid theme
+      // This ensures the background matches the baked-in SVG colors
+      const bg = isDark ? '#042f2e' : '#f0fdfa';
 
       const html = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "visual-explainer",`
`3`		`- "version": "0.6.1",`
	`3`	`+ "version": "0.6.2",`
`4`	`4`	`"description": "Agent skill that generates beautiful HTML pages for diagrams, diff reviews, plan reviews, and data tables",`
`5`	`5`	`"keywords": [`
`6`	`6`	`"claude-code-plugin",`