fix: mermaid diagrams don't respect dark mode theme
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- frontend
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.
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)
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 1
- Avg merge
- 5h 16m
- Merged PRs (30d)
- 10
Getting set up
- Ships a Dockerfile or Docker Compose file
- No pull request template
- No contributing guide
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.
More from raystack/chronicle
-
Difficulty 1/5 Under an hour Newbie friendliness 78/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 65/100
Maintainers usually reply within 1 day
-
Difficulty 4/5 3-5 days Newbie friendliness 48/100
Maintainers usually reply within 1 day
All issues in raystack/chronicle
Similar issues
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
aiko-chan-ai/DiscordBotClient#380 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
vercel/ai-elements#507 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 2 days
-
Difficulty 2/5 Half a day Newbie friendliness 84/100
anaclumos/qa-interns#148 · 1 comment ·
Maintainers usually reply within 1 day