Gantt Chart "done" Tasks are not readable in dark mode

[OrionSehn]

Description

When in dark mode, you can't make out the words on completed tasks which fall inside the box.

gantt
    dateFormat  YYYY-MM-DD
    title       Adding GANTT diagram functionality to mermaid
    excludes    weekends
    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)

    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d

    section Critical tasks
    Completed task in the critical line :crit, done, 2014-01-06,24h
    Implement parser and jison          :crit, done, after des1, 2d
    Create tests for parser             :crit, active, 3d
    Future task in critical line        :crit, 5d
    Create tests for renderer           :2d
    Add to mermaid                      :until isadded
    Functionality added                 :milestone, isadded, 2014-01-25, 0d

    section Documentation
    Describe gantt syntax               :active, a1, after des1, 3d
    Add gantt diagram to demo page      :after a1  , 20h
    Add another diagram to demo page    :doc1, after a1  , 48h

    section Last section
    Describe gantt syntax               :after doc1, 3d
    Add gantt diagram to demo page      :20h
    Add another diagram to demo page    :48h

Loading

Steps to reproduce

see above

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

Change text color in completed text in dark mode to black so the text is still readable in dark mode.

Additional Context

No response

[OrionSehn]

I have a suspicion that some code here will need to change:

mermaid/packages/mermaid/src/themes/theme-default.js

Lines 70 to 110 in d16e46a

	/* Gantt chart variables */
	this.sectionBkgColor = 'calculated';
	this.altSectionBkgColor = 'calculated';
	this.sectionBkgColor2 = 'calculated';
	this.excludeBkgColor = '#eeeeee';
	this.taskBorderColor = 'calculated';
	this.taskBkgColor = 'calculated';
	this.taskTextLightColor = 'calculated';
	this.taskTextColor = this.taskTextLightColor;
	this.taskTextDarkColor = 'calculated';
	this.taskTextOutsideColor = this.taskTextDarkColor;
	this.taskTextClickableColor = 'calculated';
	this.activeTaskBorderColor = 'calculated';
	this.activeTaskBkgColor = 'calculated';
	this.gridColor = 'calculated';
	this.doneTaskBkgColor = 'calculated';
	this.doneTaskBorderColor = 'calculated';
	this.critBorderColor = 'calculated';
	this.critBkgColor = 'calculated';
	this.todayLineColor = 'calculated';
	this.sectionBkgColor = rgba(102, 102, 255, 0.49);
	this.altSectionBkgColor = 'white';
	this.sectionBkgColor2 = '#fff400';
	this.taskBorderColor = '#534fbc';
	this.taskBkgColor = '#8a90dd';
	this.taskTextLightColor = 'white';
	this.taskTextColor = 'calculated';
	this.taskTextDarkColor = 'black';
	this.taskTextOutsideColor = 'calculated';
	this.taskTextClickableColor = '#003163';
	this.activeTaskBorderColor = '#534fbc';
	this.activeTaskBkgColor = '#bfc7ff';
	this.gridColor = 'lightgrey';
	this.doneTaskBkgColor = 'lightgrey';
	this.doneTaskBorderColor = 'grey';
	this.critBorderColor = '#ff8888';
	this.critBkgColor = 'red';
	this.todayLineColor = 'red';

Though I'm not close enough to the project, (or javascript for that matter) to tell what exactly.

[COWI-MI]

try to set

this.taskTextDarkColor = 'black';

in packages/mermaid/src/themes/theme-dark.js

[knsv]

[sisyphus-bot] Thanks for reporting this — and apologies for the delayed response!

Bug confirmed. In the dark theme, taskTextDarkColor is set to a light value, which creates low-contrast light-on-light text for done tasks (since doneTaskBkgColor is also light). The fix lives in themes/theme-dark.js.

We've queued this for a fix.

[OrionSehn]

Thank you!

[ashishjain0512]

[sisyphus-bot]

Fix Brief — Bot-Fixable Task

This looks like a good candidate for an automated fix — queuing it up.

Diagram type: gantt
Root cause: packages/mermaid/src/themes/theme-dark.js — taskTextDarkColor is set to this.darkTextColor (a light color), creating low-contrast light-on-light text on done tasks which use doneTaskBkgColor (a light/contrast color)
Fix approach: Set taskTextDarkColor to a dark value (e.g., 'black' or a computed dark color) in theme-dark.js, matching how theme-default.js and theme-forest.js handle it
Affected files:

• packages/mermaid/src/themes/theme-dark.js

Test strategy: Add e2e test in cypress with Gantt chart using done tasks in dark theme, verify text readability
Verification: pnpm e2e -- --spec cypress/integration/rendering/gantt.spec.js
Constraints:

• Do not modify files outside the dark theme
• Draft PR targeting develop
• Include changeset (patch, fix: prefix)
• Link PR to Gantt Chart "done" Tasks are not readable in dark mode #5979