From ea9a893c246d0a83b07efaf3c0aef8dbd0656045 Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Sat, 23 Jan 2021 16:07:25 +0100
Subject: [PATCH] #1865 Making title color woitk when htmnlLabels are used

---
 .../integration/rendering/flowchart-v2.spec.js    | 15 +++++++++++++++
 src/diagrams/flowchart/styles.js                  |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index c66614143..44725fddf 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -404,5 +404,20 @@ flowchart TD
       `,
       {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
     );
+  it('63: title on subgraphs should be themable', () => {
+    imgSnapshotTest(
+      `
+      %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+      flowchart LR
+      subgraph A
+          a --> b
+      end
+      subgraph B
+          i -->f
+      end
+      A --> B
+      `,
+      {htmlLabels: true, flowchart: {htmlLabels: true}, securityLevel: 'loose'}
+    );
   });
 });
diff --git a/src/diagrams/flowchart/styles.js b/src/diagrams/flowchart/styles.js
index e9a94be09..071c5378c 100644
--- a/src/diagrams/flowchart/styles.js
+++ b/src/diagrams/flowchart/styles.js
@@ -55,8 +55,9 @@ const getStyles = options =>
     stroke-width: 1px;
   }
 
-  .cluster text {
+  .cluster text,span {
     fill: ${options.titleColor};
+    color: ${options.titleColor};
   }
 
   div.mermaidTooltip {