Fix invisible chart labels on benchmark pages#5033
Conversation
- Change Mermaid theme primaryTextColor from #ffffff to #1f2937 for readable labels - Fix CSS selectors to match actual Docusaurus Mermaid DOM structure - Add dark mode CSS overrides for chart text, background, and grid lines - Update all 7 existing benchmark markdown files and the generator script Co-authored-by: thomhurst <30480171+thomhurst@users.noreply.github.com>
Co-authored-by: thomhurst <30480171+thomhurst@users.noreply.github.com>
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This PR correctly identifies and fixes the root cause of invisible chart labels — (white text) on a (white background). The fix is well-scoped and consistent across all affected files. Good work overall.
What's done well
- Root cause fix is correct: Changing from to immediately resolves the invisible-labels bug in light mode.
- CSS selector fix: is the correct Docusaurus DOM structure — the old selectors never matched anything.
- Theme-aware approach: Using and rather than hardcoded colors is exactly right for dark mode support.
- Generator script updated: Updating prevents the bug from reappearing in future auto-generated pages.
- Consistent rollout: All 7 existing markdown files updated in lock-step.
Concerns
1. CSS selectors are now global — affects ALL Mermaid diagrams, not just benchmark charts
Current:
.markdown .docusaurus-mermaid-container svg text {
fill: var(--ifm-font-color-base) !important;
}
.markdown .docusaurus-mermaid-container svg line {
stroke: var(--ifm-color-emphasis-300);
}These selectors will silently apply to every Mermaid diagram anywhere in the docs (flowcharts, sequence diagrams, ER diagrams, etc.), potentially causing unintended visual regressions if the docs ever grow beyond benchmark charts.
Suggested improvement: Use a more scoped selector, or wrap benchmark charts in a custom class:
<div className="benchmark-chart">
```mermaid
...2. The selector used for dark mode background is fragile
[data-theme='dark'] .markdown .docusaurus-mermaid-container svg .main > rect {
fill: var(--ifm-background-color) !important;
}The class is an internal Mermaid implementation detail — it's not part of any public API contract and could silently break on any Mermaid version update. The underlying cause is that the Mermaid init block hardcodes .
Suggested improvement: Rather than patching around it in CSS, consider removing the forced white background from the Mermaid config entirely:
// Remove or conditionally set this:
'background': '#ffffff',
'edgeLabelBackground': '#ffffff',Without a forced background, Mermaid should inherit the page background more naturally, eliminating the need for the fragile selector.
3. Bar color differentiation was removed without replacement
The old CSS attempted (though with broken selectors) to color-code bars by framework — TUnit green, NUnit red, MSTest amber, xUnit purple. These were removed. The bars will now fall back to Mermaid's default palette.
This is acceptable given the selectors were never working anyway, but it's worth noting as a deliberate trade-off. If per-framework colors are desired in the future, the right place is within the Mermaid config block rather than CSS (Mermaid doesn't currently support per-bar color configuration natively, so this would need to wait for Mermaid to add that feature).
Minor note
The duplicate dark mode text rule is technically redundant:
/* Light mode already sets this via --ifm-font-color-base */
[data-theme='dark'] .markdown .docusaurus-mermaid-container svg text {
fill: var(--ifm-font-color-base) !important; /* same property, same var */
}Since already adapts between light and dark, the dark-mode rule is a no-op. Not harmful, just unnecessary.
Summary
The fix solves the reported bug correctly. The main concern worth addressing before merging (or as a follow-up) is item #2 — the selector is an implementation detail of Mermaid's SVG output and could silently break on a Mermaid upgrade. The other points are lower priority, but the global CSS scope (#1) is worth keeping in mind as the docs grow.
There was a problem hiding this comment.
Code Review
This PR correctly identifies and fixes the root cause of invisible chart labels — primaryTextColor: '#ffffff' (white text) on a background: '#ffffff' (white background). The fix is well-scoped and consistent across all affected files. Good work overall.
What's done well
- Root cause fix is correct: Changing
primaryTextColorfrom#ffffffto#1f2937immediately resolves the invisible-labels bug in light mode. - CSS selector fix:
.docusaurus-mermaid-container svgis the correct Docusaurus DOM structure — the old.mermaid .xychartselectors never matched anything. - Theme-aware approach: Using
var(--ifm-font-color-base)andvar(--ifm-background-color)rather than hardcoded colors is exactly right for dark mode support. - Generator script updated: Updating
process-benchmarks.jsprevents the bug from reappearing in future auto-generated pages. - Consistent rollout: All 7 existing markdown files updated in lock-step.
Concerns
1. CSS selectors are now global — affects ALL Mermaid diagrams, not just benchmark charts
The new selectors apply to every Mermaid diagram anywhere in the docs:
.markdown .docusaurus-mermaid-container svg text { ... }
.markdown .docusaurus-mermaid-container svg line { ... }
These will silently affect flowcharts, sequence diagrams, or any other Mermaid diagram type if the docs ever grow beyond benchmark charts. This could cause unintended visual regressions.
A more scoped approach: wrap benchmark chart MDX blocks in a custom div (<div className="benchmark-chart">) and target .benchmark-chart .docusaurus-mermaid-container svg text. This isolates benchmark styling from the rest of the docs.
2. The .main > rect selector for dark mode background is fragile
[data-theme='dark'] .markdown .docusaurus-mermaid-container svg .main > rect {
fill: var(--ifm-background-color) !important;
}
The .main class is an internal Mermaid SVG implementation detail — not a public API. It could silently break on any Mermaid version update. The root cause is the hardcoded 'background': '#ffffff' in the Mermaid init block.
A better fix: remove the forced background from the Mermaid config entirely ('background': '#ffffff' and 'edgeLabelBackground': '#ffffff'). Without a forced background, Mermaid should inherit the page background naturally, eliminating the need for this fragile selector.
3. Bar color differentiation was removed without replacement
The old CSS attempted to color-code bars by framework (TUnit=green, NUnit=red, MSTest=amber, xUnit=purple). Those were removed. The old selectors were broken, so this wasn't actually working before — but it's worth noting the intent was lost. Per-bar colors in xychart-beta aren't configurable via Mermaid theme variables today, so this would require a future Mermaid update or a chart type switch to restore.
Minor note
The dark mode text rule is redundant — --ifm-font-color-base already adapts automatically between light and dark in Docusaurus, so the [data-theme='dark'] override for svg text is a no-op (same property, same CSS variable as light mode). Not harmful, just unnecessary.
Summary
The fix correctly solves the reported bug, and the screenshots confirm it works. The main concern worth addressing is #2 (fragile .main > rect selector) which could silently break on a Mermaid upgrade. The global CSS scope in #1 is a secondary maintainability concern. Neither blocks merging the immediate bug fix.
Mermaid xychart labels on benchmark docs pages are invisible — white text (
primaryTextColor: #ffffff) on white background. Dark mode is also broken because the CSS selectors target.mermaid .xychartwhich doesn't exist in the Docusaurus DOM (actual structure is.docusaurus-mermaid-container svg).Changes
primaryTextColorfrom#ffffffto#1f2937in all 7 benchmark markdown files and the generator script (.github/scripts/process-benchmarks.js)benchmark-charts.cssto target the actual DOM structure (.markdown .docusaurus-mermaid-container svg) instead of the non-existent.mermaid .xychartvar(--ifm-font-color-base), chart background viavar(--ifm-background-color), grid lines via emphasis colorBefore (dark mode)
After
Original prompt
🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.