Template for dynamic styles in place

src/diagrams/flowchart/theme.js

@@ -0,0 +1,96 @@
+const options = {
+  mainBkg: '#ECECFF',
+  secondBkg: '#ffffde',
+  lineColor: '#333333',
+  border1: '#CCCCFF',
+  border2: '#aaaa33',
+  arrowheadColor: '#333333',
+
+  /* Flowchart variables */
+
+  nodeBkg: 'mainBkg',
+  nodeBorder: '#9370DB',
+  clusterBkg: 'secondBkg',
+  clusterBorder: 'border2',
+  defaultLinkColor: 'lineColor',
+  titleColor: '#333',
+  edgeLabelBackground: '#e8e8e8'
+};
+
+const getStyles = () =>
+  `.label {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+    color: #333;
+  }
+
+  .label text {
+    fill: #333;
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon,
+  .node path {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .node .label {
+    text-align: center;
+  }
+  .node.clickable {
+    cursor: pointer;
+  }
+
+  .arrowheadPath {
+    fill: ${options.arrowheadColor};
+  }
+
+  .edgePath .path {
+    stroke: ${options.lineColor};
+    stroke-width: 1.5px;
+  }
+
+  .flowchart-link {
+    stroke: ${options.lineColor};
+    fill: none;
+  }
+
+  .edgeLabel {
+    background-color: ${options.edgeLabelBackground};
+    rect {
+      opacity: 0.5;
+    }
+    text-align: center;
+  }
+
+  .cluster rect {
+    fill: ${options.secondBkg};
+    stroke: ${options.clusterBorder};
+    stroke-width: 1px;
+  }
+
+  .cluster text {
+    fill: ${options.titleColor};
+  }
+
+  div.mermaidTooltip {
+    position: absolute;
+    text-align: center;
+    max-width: 200px;
+    padding: 2px;
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+    font-size: 12px;
+    background: ${options.secondBkg};
+    border: 1px solid ${options.border2};
+    border-radius: 2px;
+    pointer-events: none;
+    z-index: 100;
+  }
+`;
+
+export default getStyles;