fix(gantt): restore readable outside-text for done tasks in dark mode

.changeset/fix-gantt-done-outside-text-dark.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix(gantt): restore readable outside-text color for done tasks in dark mode

cypress/integration/rendering/gantt.spec.js

@@ -884,4 +884,38 @@ describe('Gantt diagram', () => {
       { theme: 'dark' }
     );
   });
+  it('should render done task inside-text readable in dark mode', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD
+      title Gantt dark mode done-task inside-text readability
+
+      section A section
+      Done :done, 2014-01-06, 14d
+      Active :active, 2014-01-20, 14d
+
+      section Critical tasks
+      Done critical :crit, done, 2014-01-06, 14d
+      `,
+      { theme: 'dark' }
+    );
+  });
+  it('should render done task outside-text readable in dark mode (regression #7433)', () => {
+    imgSnapshotTest(
+      `
+    gantt
+      dateFormat  YYYY-MM-DD
+      title Gantt dark mode done-task outside-text readability
+
+      section A section
+      A very long label that will not fit inside the short bar :done, 2014-01-06, 1d
+      Active short bar                                         :active, 2014-01-07, 1d
+
+      section Critical tasks
+      A very long label that will not fit inside the short bar :crit, done, 2014-01-06, 1d
+      `,
+      { theme: 'dark' }
+    );
+  });
 });

packages/mermaid/src/diagrams/gantt/styles.js

@@ -191,6 +191,19 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  /* Done task text displayed outside the bar sits against the diagram background,
+     not against the done-task bar, so it must use the outside/contrast color. */
+  .doneText0.taskTextOutsideLeft,
+  .doneText0.taskTextOutsideRight,
+  .doneText1.taskTextOutsideLeft,
+  .doneText1.taskTextOutsideRight,
+  .doneText2.taskTextOutsideLeft,
+  .doneText2.taskTextOutsideRight,
+  .doneText3.taskTextOutsideLeft,
+  .doneText3.taskTextOutsideRight {
+    fill: ${options.taskTextOutsideColor} !important;
+  }
+
 
   /* Tasks on the critical line */
 
@@ -237,6 +250,18 @@ const getStyles = (options) =>
     fill: ${options.taskTextDarkColor} !important;
   }
 
+  /* Done-crit task text outside the bar — same reasoning as doneText above. */
+  .doneCritText0.taskTextOutsideLeft,
+  .doneCritText0.taskTextOutsideRight,
+  .doneCritText1.taskTextOutsideLeft,
+  .doneCritText1.taskTextOutsideRight,
+  .doneCritText2.taskTextOutsideLeft,
+  .doneCritText2.taskTextOutsideRight,
+  .doneCritText3.taskTextOutsideLeft,
+  .doneCritText3.taskTextOutsideRight {
+    fill: ${options.taskTextOutsideColor} !important;
+  }
+
   .vert {
     stroke: ${options.vertLineColor};
   }