fix(gantt): readable done-task text in dark theme

[knsv]

Summary

Resolves #5979

• In the dark theme, taskTextDarkColor was derived from darkTextColor — a light color (~86% lightness) meant for use against the dark diagram background. When applied to done-task text over doneTaskBkgColor (lightgrey), this produced unreadable light-on-light text.
• Changed taskTextDarkColor to invert(this.doneTaskBkgColor) so the text color is derived from the background it sits on, staying contrast-aware within the theme pipeline. If a user overrides doneTaskBkgColor via themeVariables, the text color adjusts automatically.

Classification

• Change type: theme / style (dark theme only)
• Breaking change: No — fixes broken contrast; the current behaviour is a bug
• Shared code touched: No — only theme-dark.js

Verification

• TDD: test failed before fix (taskTextDarkColor === darkTextColor, light), passes after (taskTextDarkColor === #2c2c2c, dark)
• Lint: passed
• Unit tests: passed (pnpm vitest run packages/mermaid/src/themes/)
• Programmatic contrast check: #2c2c2c on lightgrey — high contrast confirmed
• Visual spot-check: Playwright not available in worktree — programmatic verification only
• Full e2e: not run locally — e2e snapshot test added for CI
• Changeset: generated (patch)

🤖 Generated with Claude Code

[changeset-bot]

🦋 Changeset detected

Latest commit: 4cd3fff

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
mermaid	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	4cd3fff
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/69a5717d0cfa1e0007c1f65f
😎 Deploy Preview	https://deploy-preview-7432--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[pkg-pr-new]

Open in StackBlitz

@mermaid-js/examples

npm i https://pkg.pr.new/@mermaid-js/examples@7432

mermaid

npm i https://pkg.pr.new/mermaid@7432

@mermaid-js/layout-elk

npm i https://pkg.pr.new/@mermaid-js/layout-elk@7432

@mermaid-js/layout-tidy-tree

npm i https://pkg.pr.new/@mermaid-js/layout-tidy-tree@7432

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/@mermaid-js/mermaid-zenuml@7432

@mermaid-js/parser

npm i https://pkg.pr.new/@mermaid-js/parser@7432

@mermaid-js/tiny

npm i https://pkg.pr.new/@mermaid-js/tiny@7432

commit: 2adebfe

[codecov]

Codecov Report

❌ Patch coverage is 0% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.54%. Comparing base (3b5f67d) to head (4cd3fff).
⚠️ Report is 12 commits behind head on develop.

Files with missing lines	Patch %	Lines
packages/mermaid/src/themes/theme-dark.js	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #7432      +/-   ##
==========================================
- Coverage     3.55%   3.54%   -0.02%     
==========================================
  Files          489     490       +1     
  Lines        48774   48938     +164     
  Branches       765     766       +1     
==========================================
  Hits          1734    1734              
- Misses       47040   47204     +164     

Flag	Coverage Δ
unit	3.54% <0.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/themes/theme-dark.js	2.23% <0.00%> (ø)

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	👍 Changes approved	2 changed, 2 added	Mar 2, 2026, 11:28 AM

[ashishjain0512]

[sisyphus-bot]

Review — PR #7432: fix(gantt): readable done-task text in dark theme

Thanks @knsv — excellent root-cause analysis and a clean fix for a long-standing readability issue. The PR description is thorough and the TDD approach is spot on.

---

What's working well

🎉 [praise] The root-cause analysis in the PR description is exemplary — tracing taskTextDarkColor → darkTextColor → lighten(invert('#323D47'), 10) to show why the color ends up light is exactly the level of detail that makes theme bugs debuggable later.

🎉 [praise] Using invert(this.doneTaskBkgColor) instead of a hardcoded color keeps the fix within the theme pipeline — if a user overrides doneTaskBkgColor via themeVariables, the text color adapts automatically. This is the right pattern.

🎉 [praise] Both a unit test and an e2e visual regression test are included. The e2e test covers multiple gantt task states (done, active, future, crit+done) which gives good regression coverage.

---

Things to address

🟡 [important] Pie chart regression via taskTextDarkColor fallback — theme-dark.js:233,237

taskTextDarkColor is used as the fallback for pieTitleTextColor and pieLegendTextColor:

this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;  // line 233
this.pieLegendTextColor = this.pieLegendTextColor || this.taskTextDarkColor;  // line 237

Before this fix, taskTextDarkColor was a light color (darkTextColor ≈ lightened #CDC2B8), which reads well against the dark theme background (#333). After the fix, it becomes invert('lightgrey') ≈ #2C2C2C, which is dark-on-dark against the diagram background — likely unreadable pie chart titles and legends.

A straightforward fix would be to set these explicitly before the fallback takes effect, e.g. adding to updateColors() before the pie section:

this.pieTitleTextColor = this.pieTitleTextColor || this.mainContrastColor;
this.pieLegendTextColor = this.pieLegendTextColor || this.mainContrastColor;

mainContrastColor is 'lightgrey' in dark theme, which reads well on #333. This decouples pie text from the gantt-specific variable. It would be great to add a pie chart dark-theme e2e test alongside the gantt one to verify.

---

🟢 [nit] Unit test assertion strength — theme-dark.spec.js:20

The test asserts expect(color).not.toBe(theme.darkTextColor) which is a negative assertion — it confirms the bug is gone but doesn't verify the fix is correct. A positive assertion checking the computed value is a recognizably dark color (e.g., checking the hex value or using a simple lightness heuristic) would catch future regressions more precisely.

---

Summary: The fix direction is correct and well-reasoned. The one item to address is the downstream impact on pie chart colors in dark theme — once that's handled, this should be good to go. Let's get this across the finish line! 🚀

[ashishjain0512]

[sisyphus-bot]

Re-review — PR #7432 (Round 2)

Both items from round 1 are fully addressed in commit 4cd3fff:

🎉 [praise] The pie chart decoupling is clean — pieTitleTextColor and pieLegendTextColor now fall back to mainContrastColor ('lightgrey') instead of taskTextDarkColor, breaking the cross-diagram coupling that would have caused dark-on-dark text. Exactly the right fix.

🎉 [praise] The test coverage is now thorough — positive assertion on the computed hex value ('#2c2c2c'), separate pie chart unit tests confirming 'lightgrey', and a new dark-mode pie e2e snapshot test. This covers both the fix and the regression guard.

Previous items — resolved:

• 🟡 Pie chart regression — Fixed by decoupling to mainContrastColor
• 🟢 Unit test assertion strength — Now uses positive toBe('#2c2c2c') assertion

No remaining issues. LGTM — nice work @knsv! 🚀

[knsv]

A regression issue was found while testing:

Please note that sometimes when the label does not fit inside the rectangle, the text is displayed next to the graphical bar. After the change in this PR, #7432, it renders with black text in dark mode which is unreadable.