fix: mermaid diagrams don't respect dark mode theme
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 1
- Avg merge
- 12h 29m
- Merged PRs (30d)
- 12
Description
Problem
`src/components/mdx/mermaid.tsx` initializes mermaid with `theme: 'default'` (line 19), which always renders light-mode diagrams regardless of the site's current theme. In dark mode, diagrams appear as bright white boxes.
Suggested Fix
- Read the current theme from the document (`document.documentElement.dataset.theme` or the Apsara ThemeProvider context)
- Initialize mermaid with `theme: 'dark'` when in dark mode
- Re-render diagrams on theme change (listen for `data-theme` attribute mutations)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/components/mdx/mermaid.tsx at the Mermaid initialization on line 19, then inspect how the site exposes the current theme. Determine how data-theme changes can trigger diagram re-rendering, and verify that diagrams use the dark theme in dark mode and the default theme otherwise.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100