#1542 Setting up base theme for custom theming

src/diagrams/er/styles.js

@@ -6,9 +6,9 @@ const getStyles = options =>
   }
 
   .relationshipLabelBox {
-    fill: ${options.edgeLabelBackground};
-    fillopactity: 0;
-    background-color: ${options.edgeLabelBackground};
+    fill: ${options.tertiaryColor};
+    opacity: 0.3;
+    background-color: ${options.tertiaryColor};
       rect {
         opacity: 0.5;
       }

src/diagrams/gantt/styles.js

@@ -252,7 +252,7 @@ const getStyles = options =>
   .titleText {
     text-anchor: middle;
     font-size: 18px;
-    fill: ${options.taskTextDarkColor}    ;
+    fill: ${options.textColor}    ;
     font-family: 'trebuchet ms', verdana, arial;
     font-family: var(--mermaid-font-family);
   }

src/diagrams/state/stateRenderer-v2.js

@@ -324,7 +324,6 @@ export const draw = function(text, id) {
       rect.setAttribute('ry', 0);
       rect.setAttribute('width', dim.width);
       rect.setAttribute('height', dim.height);
-      rect.setAttribute('style', 'fill:#e8e8e8;');
 
       label.insertBefore(rect, label.firstChild);
     }

src/diagrams/state/styles.js

@@ -61,6 +61,14 @@ g.stateGroup line {
   opacity: 0.5;
 }
 
+.edgeLabel .label rect {
+  fill: ${options.tertiaryColor};
+  opacity: 0.3;
+}
+.edgeLabel .label text {
+  fill: ${options.tertiaryTextColor};
+}
+
 .stateLabel text {
   fill: ${options.labelColor};
   font-size: 10px;
@@ -70,12 +78,12 @@ g.stateGroup line {
 }
 
 .node circle.state-start {
-  fill: black;
+  fill: ${options.primaryBorderColor};
   stroke: black;
 }
 .node circle.state-end {
-  fill: black;
-  stroke: white;
+  fill: ${options.primaryBorderColor};
+  stroke: ${options.background};
   stroke-width: 1.5
 }
 
@@ -150,6 +158,10 @@ g.stateGroup line {
   ry: 0;
 }
 
+.statediagram-note text {
+  fill: ${options.noteTextColor};
+}
+
 .statediagram-note .nodeLabel {
   color: ${options.noteTextColor};
 }