Frontmatter
| id | 8754 |
| title | Implement Theme-Aware Mermaid Diagram Rendering |
| state | Closed |
| labels | enhancementepicdesignai |
| assignees | tobiu |
| createdAt | Jan 17, 2026, 7:08 AM |
| updatedAt | Jan 17, 2026, 11:44 AM |
| githubUrl | https://github.com/neomjs/neo/issues/8754 |
| author | tobiu |
| commentsCount | 1 |
| parentIssue | 8727 |
| subIssues | [] |
| subIssuesCompleted | 0 |
| subIssuesTotal | 0 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Jan 17, 2026, 11:44 AM |
Implement Theme-Aware Mermaid Diagram Rendering
tobiu added parent issue #8727 on Jan 17, 2026, 7:09 AM
tobiu assigned to @tobiu on Jan 17, 2026, 7:09 AM
tobiu
Jan 17, 2026, 10:54 AM
Input from Gemini 3 Pro:
✦ I have implemented theme-aware rendering for Mermaid diagrams.
Changes:
Neo.main.addon.Mermaid:
- Added a
themeMapto map Neo themes (neo-theme-dark, etc.) to Mermaid themes (dark,neutral, etc.).- Added logic to
render()to detect theme changes and re-initializemermaid.jsonly when the mapped theme changes.
Neo.component.wrapper.Mermaid:
- Implemented
afterSetThemeto trigger a re-render when the component's theme changes.- Updated
render()to pass the current Neo theme to the addon.
Neo.component.Markdown:
- Implemented
afterSetThemeto re-process the markdown content (and thus re-render Mermaid blocks) upon theme switch.- Updated the Mermaid rendering block to pass the current Neo theme to the addon.
Outcome: Mermaid diagrams will now automatically adapt to the application's theme, ensuring legibility in both Light and Dark modes. The mapping logic is centralized in the addon for consistency.
tobiu closed this issue on Jan 17, 2026, 11:44 AM
Implement theme-aware rendering for Mermaid diagrams to ensure legibility in both Light and Dark modes.
Problem: Mermaid diagrams currently render with default (light) styling, which is illegible in Dark Mode (e.g., dark text on dark background, or harsh white backgrounds). Mermaid does not automatically adapt to CSS background changes.
Requirements:
Neo.main.addon.Mermaid(Main Thread) must be aware of the current application theme.{ theme: 'dark' }) to Mermaid during initialization or execution.Neo.component.Markdowncorrectly propagates the theme state to the addon.