Fix invisible chart labels on benchmark pages

[Copilot]

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 .xychart which doesn't exist in the Docusaurus DOM (actual structure is .docusaurus-mermaid-container svg).

Changes

• Mermaid theme — Changed primaryTextColor from #ffffff to #1f2937 in all 7 benchmark markdown files and the generator script (.github/scripts/process-benchmarks.js)
• CSS selectors — Rewrote benchmark-charts.css to target the actual DOM structure (.markdown .docusaurus-mermaid-container svg) instead of the non-existent .mermaid .xychart
• Dark mode — Added working overrides: text color via var(--ifm-font-color-base), chart background via var(--ifm-background-color), grid lines via emphasis color

Before (dark mode)

After

Light	Dark

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: (docs) Charts labels are not visible</issue_title>
<issue_description>### Description

E.g. https://tunit.dev/docs/benchmarks/DataDrivenTests/ the background / labels of the chart are both white. (Windows darkmode using Chrome)

Expected Behavior

Chart Labels should be readable.

Actual Behavior

Chart Labels are not readable.

Steps to Reproduce

1. Windows darkmode (Android darkmode Chrome is also affected)
2. Goto https://tunit.dev/docs/benchmarks/DataDrivenTests/
3. Chart Labels not readable

TUnit Version

1.17.54

.NET Version

.NET 10

Operating System

Windows

IDE / Test Runner

dotnet CLI (dotnet test / dotnet run)

Error Output / Stack Trace

Additional Context

No response

IDE-Specific Issue?

• I've confirmed this issue occurs when running via dotnet test or dotnet run, not just in my IDE</issue_description>

<agent_instructions>Let's add labels to the charts. And let's also make the charts respect dark mode themes.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Bug]: (docs) Charts labels are not visible #5032

---

🔒 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.

[claude]

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
...

``` Then target . This is a better architectural pattern for the future.

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.

[claude]

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 primaryTextColor from #ffffff to #1f2937 immediately resolves the invisible-labels bug in light mode.
• CSS selector fix: .docusaurus-mermaid-container svg is the correct Docusaurus DOM structure — the old .mermaid .xychart selectors never matched anything.
• Theme-aware approach: Using var(--ifm-font-color-base) and var(--ifm-background-color) rather than hardcoded colors is exactly right for dark mode support.
• Generator script updated: Updating process-benchmarks.js 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

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.