Merge branch 'mermaid-js-develop' into develop

src/diagrams/flowchart/flowDb.js

@@ -7,7 +7,7 @@ import common from '../common/common';
 // const MERMAID_DOM_ID_PREFIX = 'mermaid-dom-id-';
 const MERMAID_DOM_ID_PREFIX = '';
 
-const config = getConfig();
+let config = getConfig();
 let vertices = {};
 let edges = [];
 let classes = [];
@@ -44,6 +44,7 @@ export const addVertex = function(_id, text, type, style, classes) {
     vertices[id] = { id: id, styles: [], classes: [] };
   }
   if (typeof text !== 'undefined') {
+    config = getConfig();
     txt = common.sanitizeText(text.trim(), config);
 
     // strip quotes if string starts and ends with a quote

src/themes/dark/index.scss

@@ -1,7 +1,7 @@
 $mainBkg: #1f2020;
 $secondBkg: lighten(#1f2020, 16);
 $mainContrastColor: lightgrey;
-$darkTextColor: #323D47;
+$darkTextColor: #fefefe;
 $lineColor: $mainContrastColor;
 $border1: #81B1DB;
 $border2: rgba(255, 255, 255, 0.25);
@@ -16,6 +16,7 @@ $clusterBorder: $border2;
 $defaultLinkColor: $lineColor;
 $titleColor: #F9FFFE;
 $edgeLabelBackground: #e8e8e8;
+$edgeLabelcolor: #333;
 
 /* Sequence Diagram variables */
 
@@ -58,7 +59,7 @@ $taskTextDarkColor: $darkTextColor;
 $todayLineColor: #DB5757;
 
 /* state colors */
-$labelColor: black;
+$labelColor: #f4f4f4;
 
 $errorBkgColor: #a44141;
 $errorTextColor: #ddd;

src/themes/default/index.scss

@@ -14,6 +14,7 @@ $clusterBorder: $border2;
 $defaultLinkColor: $lineColor;
 $titleColor: #333;
 $edgeLabelBackground: #e8e8e8;
+$edgeLabelcolor: #333;
 
 /* Sequence Diagram variables */
 

src/themes/flowchart.scss

@@ -1,11 +1,12 @@
 .label {
   font-family: 'trebuchet ms', verdana, arial;
   font-family: var(--mermaid-font-family);
-  color: #333;
+  fill: $titleColor;
+  color: $titleColor;
 }
 
 .label text {
-  fill: #333;
+  fill: $titleColor;
 }
 
 .node rect,
@@ -20,6 +21,7 @@
 
 .node .label {
   text-align: center;
+  fill: $titleColor;
 }
 .node.clickable {
   cursor: pointer;
@@ -42,9 +44,12 @@
 .edgeLabel {
   background-color: $edgeLabelBackground;
   rect {
-    opacity: 0.5;
+    opacity: 0.9;
   }
   text-align: center;
+  span {
+    color: $edgeLabelcolor;
+  }
 }
 
 .cluster rect {

src/themes/forest/index.scss

@@ -15,7 +15,7 @@ $clusterBorder: $border2;
 $defaultLinkColor: $lineColor;
 $titleColor: #333;
 $edgeLabelBackground: #e8e8e8;
-
+$edgeLabelcolor: #333;
 /* Sequence Diagram variables */
 
 $actorBorder: $border1;

src/themes/neutral/index.scss

@@ -19,6 +19,7 @@ $clusterBorder: $border2;
 $defaultLinkColor: $lineColor;
 $titleColor: $text;
 $edgeLabelBackground: white;
+$edgeLabelcolor: #333;
 
 /* Sequence Diagram variables */
 

src/themes/state.scss

@@ -7,10 +7,14 @@ g.stateGroup text {
 }
 g.stateGroup text {
   fill: $nodeBorder;
+  fill: $titleColor;
   stroke: none;
   font-size: 10px;
 
 }
+g.statediagram-cluster .cluster-label text {
+  fill: $titleColor;
+}
 g.stateGroup .state-title {
   font-weight: bolder;
   fill: $labelColor;
@@ -57,7 +61,11 @@ g.stateGroup line {
   stroke: none;
   stroke-width: 0;
   fill: $nodeBkg;
-  opacity: 0.5;
+  opacity: 0.7;
+}
+
+.edgeLabel text {
+  fill: #333;
 }
 
 .stateLabel text {