diff --git a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
index 13eb31a02..8165530dc 100644
--- a/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
+++ b/packages/mermaid/src/diagrams/user-journey/journeyRenderer.ts
@@ -49,6 +49,7 @@ const conf = getConfig().journey;
 const LEFT_MARGIN = conf.leftMargin;
 export const draw = function (text, id, version, diagObj) {
   const conf = getConfig().journey;
+  const titleColor = getConfig().themeVariables.titleColor;
 
   const securityLevel = getConfig().securityLevel;
   // Handle root and Document for when rendering in sandbox mode
@@ -95,7 +96,8 @@ export const draw = function (text, id, version, diagObj) {
       .attr('x', LEFT_MARGIN)
       .attr('font-size', '4ex')
       .attr('font-weight', 'bold')
-      .attr('y', 25);
+      .attr('y', 25)
+      .attr('fill', titleColor);
   }
 
   const height = box.stopy - box.starty + 2 * conf.diagramMarginY;
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index e0023758e..758a46e46 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -178,7 +178,7 @@ class Theme {
     this.clusterBkg = this.secondBkg;
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
-    this.titleColor = this.textColor;
+    this.titleColor = this.titleColor || this.textColor;
     this.edgeLabelBackground = this.labelBackground;
 
     /* Sequence Diagram variables */