diff --git a/docs/config/theming.md b/docs/config/theming.md
index 63271a39b7..54b93a8b34 100644
--- a/docs/config/theming.md
+++ b/docs/config/theming.md
@@ -241,6 +241,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | defaultLinkColor    | lineColor                      | Link Color                  |
 | titleColor          | tertiaryTextColor              | Title Color                 |
 | edgeLabelBackground | calculated from secondaryColor |                             |
+| edgeLabelTextColor  | secondaryTextColor             |                             |
 | nodeTextColor       | primaryTextColor               | Color for text inside Nodes |
 
 ## Sequence Diagram Variables
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/styles.ts b/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
index 60659df457..c25c583742 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/styles.ts
@@ -5,6 +5,7 @@ export interface FlowChartStyleOptions {
   clusterBkg: string;
   clusterBorder: string;
   edgeLabelBackground: string;
+  edgeLabelTextColor: string;
   fontFamily: string;
   lineColor: string;
   mainBkg: string;
@@ -85,6 +86,8 @@ const getStyles = (options: FlowChartStyleOptions) =>
       background-color: ${options.edgeLabelBackground};
       fill: ${options.edgeLabelBackground};
     }
+    fill: ${options.edgeLabelTextColor || options.textColor};
+    color: ${options.edgeLabelTextColor || options.textColor};
     text-align: center;
   }
 
diff --git a/packages/mermaid/src/diagrams/flowchart/styles.ts b/packages/mermaid/src/diagrams/flowchart/styles.ts
index d0c3c77c6c..d1915d0435 100644
--- a/packages/mermaid/src/diagrams/flowchart/styles.ts
+++ b/packages/mermaid/src/diagrams/flowchart/styles.ts
@@ -8,6 +8,7 @@ export interface FlowChartStyleOptions {
   clusterBkg: string;
   clusterBorder: string;
   edgeLabelBackground: string;
+  edgeLabelTextColor: string;
   fontFamily: string;
   lineColor: string;
   mainBkg: string;
@@ -94,13 +95,15 @@ const getStyles = (options: FlowChartStyleOptions) =>
       background-color: ${options.edgeLabelBackground};
       fill: ${options.edgeLabelBackground};
     }
+    fill: ${options.edgeLabelTextColor || options.textColor};
+    color: ${options.edgeLabelTextColor || options.textColor};
     text-align: center;
   }
 
   /* For html labels only */
   .labelBkg {
     background-color: ${fade(options.edgeLabelBackground, 0.5)};
-    // background-color: 
+    // background-color:
   }
 
   .cluster rect {
diff --git a/packages/mermaid/src/docs/config/theming.md b/packages/mermaid/src/docs/config/theming.md
index 0e08532837..89bcd07c40 100644
--- a/packages/mermaid/src/docs/config/theming.md
+++ b/packages/mermaid/src/docs/config/theming.md
@@ -163,6 +163,7 @@ The theming engine will only recognize hex colors and not color names. So, the v
 | defaultLinkColor    | lineColor                      | Link Color                  |
 | titleColor          | tertiaryTextColor              | Title Color                 |
 | edgeLabelBackground | calculated from secondaryColor |                             |
+| edgeLabelTextColor  | secondaryTextColor             |                             |
 | nodeTextColor       | primaryTextColor               | Color for text inside Nodes |
 
 ## Sequence Diagram Variables
diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index d1a6eae2ab..4cb78d7e75 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -63,6 +63,7 @@ class Theme {
     this.edgeLabelBackground =
       this.edgeLabelBackground ||
       (this.darkMode ? darken(this.secondaryColor, 30) : this.secondaryColor);
+    this.edgeLabelTextColor = this.secondaryTextColor;
     this.nodeTextColor = this.nodeTextColor || this.primaryTextColor;
     /* Sequence Diagram variables */
 
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index c566251090..fa1a105e8a 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -39,6 +39,7 @@ class Theme {
     this.defaultLinkColor = 'calculated';
     this.titleColor = '#F9FFFE';
     this.edgeLabelBackground = 'calculated';
+    this.edgeLabelTextColor = 'calculated';
 
     /* Sequence Diagram variables */
 
@@ -103,6 +104,7 @@ class Theme {
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
     this.edgeLabelBackground = lighten(this.labelBackground, 25);
+    this.edgeLabelTextColor = this.secondaryTextColor;
 
     /* Sequence Diagram variables */
 
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 6aa18fcc78..55b803f3c1 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -47,6 +47,7 @@ class Theme {
     this.defaultLinkColor = 'calculated';
     this.titleColor = 'calculated';
     this.edgeLabelBackground = 'calculated';
+    this.edgeLabelTextColor = 'calculated';
 
     /* Sequence Diagram variables */
 
@@ -173,6 +174,7 @@ class Theme {
     this.defaultLinkColor = this.lineColor;
     this.titleColor = this.textColor;
     this.edgeLabelBackground = this.labelBackground;
+    this.edgeLabelTextColor = this.secondaryTextColor;
 
     /* Sequence Diagram variables */
 
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 0270f51ff9..9722425707 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -40,6 +40,7 @@ class Theme {
     this.defaultLinkColor = 'calculated';
     this.titleColor = '#333';
     this.edgeLabelBackground = '#e8e8e8';
+    this.edgeLabelTextColor = 'calculated';
 
     /* Sequence Diagram variables */
 
@@ -152,6 +153,7 @@ class Theme {
     this.clusterBkg = this.secondBkg;
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
+    this.edgeLabelTextColor = this.secondaryTextColor;
 
     /* Gantt chart variables */
 
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 446a9189d4..d505f35d11 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -52,6 +52,7 @@ class Theme {
     this.defaultLinkColor = 'calculated';
     this.titleColor = 'calculated';
     this.edgeLabelBackground = 'white';
+    this.edgeLabelTextColor = 'calculated';
 
     /* Sequence Diagram variables */
 
@@ -176,6 +177,7 @@ class Theme {
     this.clusterBorder = this.border2;
     this.defaultLinkColor = this.lineColor;
     this.titleColor = this.text;
+    this.edgeLabelTextColor = this.secondaryTextColor;
 
     /* Gantt chart variables */