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 {