Fixed diagram title not switching color in dark mode

material/templates/base.html

@@ -249,7 +249,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.83f73b43.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.88dd0f4e.min.js' | url }}"></script>
       {% for script in config.extra_javascript %}
         {{ script | script_tag }}
       {% endfor %}

src/templates/assets/javascripts/components/content/mermaid/index.css

@@ -48,6 +48,11 @@ marker {
  * Rules: flowcharts
  * ------------------------------------------------------------------------- */
 
+/* Flowchart title */
+.flowchartTitleText {
+  fill: var(--md-mermaid-label-fg-color);
+}
+
 /* Flowchart node label */
 .label {
   color: var(--md-mermaid-label-fg-color);
@@ -113,6 +118,11 @@ g #flowchart-pointEnd {
  * Rules: class diagrams
  * ------------------------------------------------------------------------- */
 
+/* Class diagram title */
+.classDiagramTitleText {
+  fill: var(--md-mermaid-label-fg-color);
+}
+
 /* Class group node */
 g.classGroup line,
 g.classGroup rect {
@@ -182,6 +192,11 @@ defs #classDiagram-aggregationEnd {
  * Rules: state diagrams
  * ------------------------------------------------------------------------- */
 
+/* State diagram title */
+.statediagramTitleText {
+  fill: var(--md-mermaid-label-fg-color);
+}
+
 /* State group node */
 g.stateGroup rect {
   fill: var(--md-mermaid-node-bg-color);
@@ -269,6 +284,11 @@ defs #statediagram-barbEnd {
  * Rules: entity-relationship diagrams
  * ------------------------------------------------------------------------- */
 
+/* Entity-relationship diagram title */
+.entityTitleText {
+  fill: var(--md-mermaid-label-fg-color);
+}
+
 /* Attribute box */
 .attributeBoxEven,
 .attributeBoxOdd {
@@ -328,6 +348,11 @@ defs #ZERO_OR_MORE_END circle {
  * Rules: sequence diagrams
  * ------------------------------------------------------------------------- */
 
+/* Sequence diagram title */
+text:not([class]):last-child {
+  fill: var(--md-mermaid-label-fg-color);
+}
+
 /* Sequence actor */
 .actor {
   fill: var(--md-mermaid-sequence-actor-bg-color);