Merge pull request #1593 from mermaid-js/1590_theme_finalizations

1590 theme finalizations
2025-09-18 23:09:49 +02:00 · 2020-07-30 19:57:33 +02:00
parent 116c616561 5565aab488
commit f87c56af5c
22 changed files with 392 additions and 89 deletions
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -76,7 +76,7 @@ stateDiagram-v2
      </div>
      %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
      <div class="mermaid" style="width: 50%; height: 20%;">
-        %%{init: {'theme': 'base'}}%%
+        %%{init: {'theme': 'dark'}}%%

        flowchart TB
        subgraph apa
@@ -106,8 +106,8 @@ Note over Bob,Alice: Looks back
          // console.error('Mermaid error: ', err);
        };
      mermaid.initialize({
-        // theme: 'base',
-        // themeVariables:{primaryColor: '#0000ff'},
+        theme: 'forest',
+        // themeVariables:{primaryColor: '#ff0000'},
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
--- a/cypress/platform/showcase_base.html
+++ b/cypress/platform/showcase_base.html
@@ -11,7 +11,6 @@
      body {
        /* background: rgb(221, 208, 208); */
        background: #f4f4f4;
-        /* background: #0c0c0c; */
        font-family: 'Arial';
        height: 100%;
        width: 100%;
@@ -177,7 +176,7 @@ gantt

      </div>
      <div class="mermaid width height2">
-%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
 stateDiagram-v2
        [*] --> Active

@@ -234,7 +233,7 @@ journey
        };
      mermaid.initialize({
        theme: 'base',
-        themeVariables: { primaryColor: '#ff0000'},
+        themeVariables:
        // arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 0,
--- a/cypress/platform/showcase_base_dark.html
+++ b/cypress/platform/showcase_base_dark.html
@@ -0,0 +1,245 @@
+<html>
+  <head>
+    <link
+      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
+      rel="stylesheet"
+    />
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
+    <style>
+      body {
+        /* background: rgb(221, 208, 208); */
+        background: #f4f4f4;
+        background: #222;
+        font-family: 'Arial';
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        }
+      h1 { color: grey;}
+      .mermaid2 {
+        display: none;
+      }
+      .height {
+        min-height: 600px;
+        height: 600px;
+      }
+      .height2 {
+        min-height: 600px;
+        height: 1300px;
+      }
+      .width {
+        width: 33%;
+        border: 1px solid blue;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Showcases of diagrams</h1>
+    <div class="flex flex-wrap">
+      <div class="mermaid width height">
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+      </div>
+      <div class="mermaid width height">
+%%{init2: {'securityLevel': 'loose', 'theme':'base'}}%%
+        flowchart TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[Another]
+          C ==>|One| D[Laptop]
+          C x--x|Two| E[iPhone]
+          C o--o|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+      </div>
+      <div class="mermaid width height" >
+        sequenceDiagram
+          autonumber
+          par Action 1
+            Alice->>John: Hello John, how are you?
+          and Action 2
+            Alice->>Bob: Hello Bob, how are you?
+          end
+          Alice->>+John: Hello John, how are you?
+          Alice->>+John: John, can you hear me?
+          John-->>-Alice: Hi Alice, I can hear you!
+          Note right of John: John is perceptive
+          John-->>-Alice: I feel great!
+              loop Every minute
+                John-->Alice: Great!
+            end
+      </div>
+      <div class="mermaid width height" >
+classDiagram
+	Animal "1" <|-- Duck
+	Animal <|-- Fish
+	Animal <--o Zebra
+	Animal : +int age
+	Animal : +String gender
+	Animal: +isMammal()
+	Animal: +mate()
+	class Duck{
+		+String beakColor
+		+swim()
+		+quack()
+	}
+	class Fish{
+		-int sizeInFeet
+		-canEat()
+	}
+	class Zebra{
+		+bool is_wild
+		+run()
+	}
+      </div>
+      <div class="mermaid width height">
+gantt
+       dateFormat                :YYYY-MM-DD
+       title                     Adding GANTT diagram functionality to mermaid
+       excludes                  :excludes the named dates/days from being included in a charted task..
+       section A section
+       Completed task            :done,    des1, 2014-01-06,2014-01-08
+       Active task               :active,  des2, 2014-01-09, 3d
+       Future task               :         des3, after des2, 5d
+       Future task2              :         des4, after des3, 5d
+
+       section Critical tasks
+       Completed task in the critical line :crit, done, 2014-01-06,24h
+       Implement parser and jison          :crit, done, after des1, 2d
+       Create tests for parser             :crit, active, 3d
+       Future task in critical line        :crit, 5d
+       Create tests for renderer           :2d
+       Add to mermaid                      :1d
+
+       section Documentation
+       Describe gantt syntax               :active, a1, after des1, 3d
+       Add gantt diagram to demo page      :after a1  , 20h
+       Add another diagram to demo page    :doc1, after a1  , 48h
+
+       section Last section
+       Describe gantt syntax               :after doc1, 3d
+       Add gantt diagram to demo page      :20h
+       Add another diagram to demo page    :48h
+      </div>
+      <div class="mermaid width height2">
+      stateDiagram
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+        state SomethingElse {
+          A --> B
+          B --> A
+        }
+
+        Active --> SomethingElse
+        note right of SomethingElse : This is the note to the right.
+
+        SomethingElse --> [*]
+
+      </div>
+      <div class="mermaid width height2">
+stateDiagram-v2
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+        state SomethingElse {
+          A --> B
+          B --> A
+        }
+
+        Active --> SomethingElse2
+        note right of SomethingElse2 : This is the note to the right.
+
+        SomethingElse2 --> [*]
+      </div>
+      <div class="mermaid width height2">
+      erDiagram
+        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+        CUSTOMER ||--o{ ORDER : places
+        CUSTOMER ||--o{ INVOICE : "liable for"
+        DELIVERY-ADDRESS ||--o{ ORDER : receives
+        INVOICE ||--|{ ORDER : covers
+        ORDER ||--|{ ORDER-ITEM : includes
+        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+        PRODUCT ||--o{ ORDER-ITEM : "ordered in"
+      </div>
+      <div class="mermaid width height">
+journey
+            title My working day
+            section Go to work
+              Make tea: 5: Me
+              Go upstairs: 3: Me
+              Do work: 1: Me, Cat
+            section Go home
+              Go downstairs: 5: Me
+              Sit down: 5: Me
+      </div>
+
+  <script src="./mermaid.js"></script>
+    <script>
+      mermaid.parseError = function (err, hash) {
+          // console.error('Mermaid error: ', err);
+        };
+      mermaid.initialize({
+        theme: 'base',
+        themeVariables: { primaryColor: '#9400D3', darkMode: true, background: '#222'},
+        // arrowMarkerAbsolute: true,
+        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
+        logLevel: 0,
+        flowchart: { curve: 'cardinal', "htmlLabels": false },
+        // gantt: { axisFormat: '%m/%d/%Y' },
+        sequence: { actorMargin: 50, showSequenceNumbers: true },
+        // sequenceDiagram: { actorMargin: 300 } // deprecated
+        fontFamily: '"arial", sans-serif',
+        curve: 'cardinal',
+        // securityLevel: 'strict'
+      });
+      function callback(){alert('It worked');}
+    </script>
+  </body>
+</html>
--- a/cypress/platform/showcase_dark.html
+++ b/cypress/platform/showcase_dark.html
@@ -166,6 +166,7 @@ gantt
        }

        Active --> SomethingElse
+        SomethingElse --> [*]
        note right of SomethingElse : This is the note to the right.
      </div>
      <div class="mermaid width height2">
@@ -191,6 +192,7 @@ gantt
        }

        Active --> SomethingElse2
+        SomethingElse2 --> [*]
        note right of SomethingElse2 : This is the note to the right.
      </div>
      <div class="mermaid width height2">
--- a/cypress/platform/showcase_forest.html
+++ b/cypress/platform/showcase_forest.html
@@ -167,6 +167,7 @@ gantt

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.
+        SomethingElse --> [*]
      </div>
      <div class="mermaid width height2">
      stateDiagram-v2
--- a/src/config.js
+++ b/src/config.js
@@ -20,22 +20,18 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
    const d = _directives[i];
    sanitize(d);
    cfg = assignWithDepth(cfg, d);
-    if (d.themeVariables) {
-      themeVariables = d.themeVariables;
+    if (d.theme) {
+      cfg.themeVariables = theme[cfg.theme].getThemeVariables(d.themeVariables);
    }
  }
  if (cfg.theme && theme[cfg.theme]) {
-    // console.warn('cfg beeing updated main bkg', themeVariables, cfg.theme);
-    const variables = theme[cfg.theme].getThemeVariables(themeVariables);
-    // console.warn('cfg beeing updated 2 main bkg', variables.mainBkg);
+    let tVars = assignWithDepth({}, cfg.themeVariables);
+    tVars = assignWithDepth(tVars, themeVariables);
+    const variables = theme[cfg.theme].getThemeVariables(tVars);
    cfg.themeVariables = variables;
  }
-  // else {
-  //   console.warn('cfg not beeing updated main bkg', themeVariables, cfg.theme);
-  // }

  currentConfig = cfg;
-  // console.warn('cfg updated main bkg', cfg.sequence);
  return cfg;
 };
 /**
@@ -53,23 +49,20 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
 * @returns {*} - the siteConfig
 */
 export const setSiteConfig = conf => {
-  // siteConfig = { ...defaultConfig, ...conf };
+  console.warn('Setting site config');
  siteConfig = assignWithDepth({}, defaultConfig);
  siteConfig = assignWithDepth(siteConfig, conf);
+
+  if (conf.theme) {
+    siteConfig.themeVariables = theme[conf.theme].getThemeVariables(conf.themeVariables);
+  }
+
  currentConfig = updateCurrentConfig(siteConfig, directives);
  return siteConfig;
 };
 export const updateSiteConfig = conf => {
-  // Object.keys(conf).forEach(key => {
-  //   const manipulator = manipulators[key];
-  //   conf[key] = manipulator ? manipulator(conf[key]) : conf[key];
-  // });
  siteConfig = assignWithDepth(siteConfig, conf);
-  console.log('updateSiteConfig', siteConfig);
  updateCurrentConfig(siteConfig, directives);
-  // assignWithDesetpth(currentConfig, conf, { clobber: true });
-  // // Set theme variables if user has set the theme option
-  // assignWithDepth(siteConfig, conf);

  return siteConfig;
 };
@@ -164,24 +157,7 @@ export const addDirective = directive => {
 * @param conf - the base currentConfig to reset to (default: current siteConfig )
 */
 export const reset = () => {
-  // Object.keys(siteConfig).forEach(key => delete siteConfig[key]);
-  // Object.keys(currentConfig).forEach(key => delete currentConfig[key]);
-  // assignWithDepth(siteConfig, conf, { clobber: true });
-  // assignWithDepth(currentConfig, conf, { clobber: true });
-
  // Replace current config with siteConfig
  directives = [];
-  // console.warn(siteConfig.sequence);
  updateCurrentConfig(siteConfig, directives);
 };
-
-// const configApi = Object.freeze({
-//   sanitize,
-//   setSiteConfig,
-//   getSiteConfig,
-//   setConfig,
-//   getConfig,
-//   reset,
-//   defaultConfig
-// });
-// export default configApi;
--- a/src/dagre-wrapper/intersect/intersect-node.js
+++ b/src/dagre-wrapper/intersect/intersect-node.js
@@ -1,6 +1,6 @@
 module.exports = intersectNode;

 function intersectNode(node, point) {
-  console.info('Intersect Node');
+  // console.info('Intersect Node');
  return node.intersect(point);
 }
--- a/src/dagre-wrapper/intersect/intersect-polygon.js
+++ b/src/dagre-wrapper/intersect/intersect-polygon.js
@@ -44,7 +44,7 @@ function intersectPolygon(node, polyPoints, point) {
  }

  if (!intersections.length) {
-    console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
+    // console.log('NO INTERSECTION FOUND, RETURN NODE CENTER', node);
    return node;
  }

--- a/src/diagrams/er/styles.js
+++ b/src/diagrams/er/styles.js
@@ -7,7 +7,7 @@ const getStyles = options =>

  .relationshipLabelBox {
    fill: ${options.tertiaryColor};
-    opacity: 0.3;
+    opacity: 0.7;
    background-color: ${options.tertiaryColor};
      rect {
        opacity: 0.5;
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -468,7 +468,7 @@ 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;');
+      // rect.setAttribute('style', 'fill:#e8e8e8;');

      label.insertBefore(rect, label.firstChild);
    }
--- a/src/diagrams/flowchart/flowRenderer.js
+++ b/src/diagrams/flowchart/flowRenderer.js
@@ -451,7 +451,7 @@ 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;');
+      // rect.setAttribute('style', 'fill:#e8e8e8;');

      label.insertBefore(rect, label.firstChild);
    }
--- a/src/diagrams/flowchart/styles.js
+++ b/src/diagrams/flowchart/styles.js
@@ -43,6 +43,8 @@ const getStyles = options =>
    background-color: ${options.edgeLabelBackground};
    rect {
      opacity: 0.5;
+      background-color: ${options.edgeLabelBackground};
+      fill: ${options.edgeLabelBackground};
    }
    text-align: center;
  }
--- a/src/diagrams/state/shapes.js
+++ b/src/diagrams/state/shapes.js
@@ -14,8 +14,9 @@ import { logger } from '../../logger';
 export const drawStartState = g =>
  g
    .append('circle')
-    .style('stroke', 'black')
-    .style('fill', 'black')
+    // .style('stroke', 'black')
+    // .style('fill', 'black')
+    .attr('class', 'start-state')
    .attr('r', getConfig().state.sizeUnit)
    .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit)
    .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit);
@@ -241,8 +242,9 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {

 const drawEndState = g => {
  g.append('circle')
-    .style('stroke', 'black')
-    .style('fill', 'white')
+    // .style('stroke', 'black')
+    // .style('fill', 'white')
+    .attr('class', 'end-state-outer')
    .attr('r', getConfig().state.sizeUnit + getConfig().state.miniPadding)
    .attr(
      'cx',
@@ -253,13 +255,16 @@ const drawEndState = g => {
      getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
    );

-  return g
-    .append('circle')
-    .style('stroke', 'black')
-    .style('fill', 'black')
-    .attr('r', getConfig().state.sizeUnit)
-    .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
-    .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2);
+  return (
+    g
+      .append('circle')
+      // .style('stroke', 'black')
+      // .style('fill', 'black')
+      .attr('class', 'end-state-inner')
+      .attr('r', getConfig().state.sizeUnit)
+      .attr('cx', getConfig().state.padding + getConfig().state.sizeUnit + 2)
+      .attr('cy', getConfig().state.padding + getConfig().state.sizeUnit + 2)
+  );
 };
 const drawForkJoinState = (g, stateDef) => {
  let width = getConfig().state.forkWidth;
--- a/src/diagrams/state/styles.js
+++ b/src/diagrams/state/styles.js
@@ -63,11 +63,14 @@ g.stateGroup line {

 .edgeLabel .label rect {
  fill: ${options.tertiaryColor};
-  opacity: 0.2;
+  opacity: 0.5;
 }
 .edgeLabel .label text {
  fill: ${options.tertiaryTextColor};
 }
+.label div .edgeLabel {
+  color: ${options.tertiaryTextColor};
+}

 .stateLabel text {
  fill: ${options.labelColor};
@@ -78,7 +81,7 @@ g.stateGroup line {
 }

 .node circle.state-start {
-  fill: ${options.primaryBorderColor};
+  fill: ${options.lineColor};
  stroke: black;
 }
 .node circle.state-end {
@@ -86,6 +89,11 @@ g.stateGroup line {
  stroke: ${options.background};
  stroke-width: 1.5
 }
+.end-state-inner {
+  fill: ${options.background};
+  // stroke: ${options.background};
+  stroke-width: 1.5
+}

 .node rect {
  fill: ${options.mainBkg};
--- a/src/mermaid.js
+++ b/src/mermaid.js
@@ -31,7 +31,7 @@ import utils from './utils';
 */
 const init = function() {
  const conf = mermaidAPI.getConfig();
-  console.log('Starting rendering diagrams (init) - mermaid.init', conf);
+  // console.log('Starting rendering diagrams (init) - mermaid.init', conf);
  let nodes;
  if (arguments.length >= 2) {
    /*! sequence config was passed as #1 */
@@ -129,7 +129,7 @@ const init = function() {
 };

 const initialize = function(config) {
-  mermaidAPI.reset();
+  // mermaidAPI.reset();
  if (typeof config.mermaid !== 'undefined') {
    if (typeof config.mermaid.startOnLoad !== 'undefined') {
      mermaid.startOnLoad = config.mermaid.startOnLoad;
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) {
  // console.warn('Render fetching config');

  const cnf = configApi.getConfig();
-  // console.warn('Render with config after adding new directives', cnf.themeVariables.mainBkg);
+  console.warn('Render with config after adding new directives', cnf.themeVariables.primaryColor);
  // Check the maximum allowed text size
  if (_txt.length > cnf.maxTextSize) {
    txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -552,7 +552,7 @@ function reinitialize() {
 }

 function initialize(options) {
-  logger.debug(`mermaidAPI.initialize: v${pkg.version} ${options}`);
+  console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
  // Set default options

  if (options && options.theme && theme[options.theme]) {
@@ -581,7 +581,7 @@ const mermaidAPI = Object.freeze({
  getSiteConfig: configApi.getSiteConfig,
  updateSiteConfig: configApi.updateSiteConfig,
  reset: () => {
-    console.warn('reset');
+    // console.warn('reset');
    configApi.reset();
    // const siteConfig = configApi.getSiteConfig();
    // updateRendererConfigs(siteConfig);
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -1,36 +1,40 @@
 import { darken, lighten, adjust, invert } from 'khroma';
-
-const mkBorder = (col, darkMode) =>
-  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
+import { mkBorder } from './theme-helpers';
 class Theme {
  constructor() {
    /** # Base variables */
    /** * background - used to know what the background color is of the diagram. This is used for deducing colors for istance line color. Defaulr value is #f4f4f4. */
    this.background = '#f4f4f4';
    // this.background = '#0c0c0c';
+    // this.darkMode = true;
+    this.primaryColor = '#fff4dd';
+    // this.background = '#0c0c0c';
    /** * darkMode -In darkMode the color generation deduces other colors from the primary colors */
    this.darkMode = false;
-    // this.darkMode = true;
    // this.primaryColor = '#1f1f00';

    this.noteBkgColor = '#fff5ad';
    this.noteTextColor = '#333';
+
+    // dark
+
+    // this.primaryColor = '#034694';
+    // this.primaryColor = '#f2ee7e';
    // this.primaryColor = '#9f33be';
-    this.primaryColor = '#f0fff0';
+    // this.primaryColor = '#f0fff0';
    // this.primaryColor = '#fa255e';
    // this.primaryColor = '#ECECFF';

    // this.secondaryColor = '#c39ea0';
    // this.tertiaryColor = '#f8e5e5';

-    this.secondaryColor = '#dfdfde';
-    this.tertiaryColor = '#CCCCFF';
+    // this.secondaryColor = '#dfdfde';
+    // this.tertiaryColor = '#CCCCFF';

    this.border1 = '#9370DB';
    this.arrowheadColor = '#333333';
    this.fontFamily = '"trebuchet ms", verdana, arial';
    this.fontSize = '16px';
-    this.textColor = '#333';
    this.updateColors();
    this.relationColor = '#000';
  }
@@ -38,19 +42,19 @@ class Theme {
    this.secondBkg = this.tertiaryColor;

    /* Main */
-    this.secondaryColor = adjust(this.primaryColor, { h: 120 });
-    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
-    console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
+    this.primaryTextColor = this.darkMode ? '#ddd' : '#333'; // invert(this.primaryColor);
+    this.secondaryColor = adjust(this.primaryColor, { h: -120 });
+    this.tertiaryColor = adjust(this.primaryColor, { h: 180, l: 5 });
+
    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
    this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);

-    this.primaryTextColor = invert(this.primaryColor);
    this.secondaryTextColor = invert(this.secondaryColor);
    this.tertiaryTextColor = invert(this.tertiaryColor);
    this.lineColor = invert(this.background);
-    this.textColor = invert(this.background);
+    this.textColor = this.primaryTextColor;

    /* Flowchart variables */

@@ -62,7 +66,9 @@ class Theme {
    this.clusterBorder = this.tertiaryBorderColor;
    this.defaultLinkColor = this.lineColor;
    this.titleColor = this.tertiaryTextColor;
-    this.edgeLabelBackground = this.labelBackground;
+    this.edgeLabelBackground = this.darkMode
+      ? darken(this.secondaryColor, 30)
+      : this.secondaryColor;

    /* Sequence Diagram variables */

@@ -80,7 +86,7 @@ class Theme {
    // this.noteTextColor = this.actorTextColor;
    this.activationBorderColor = darken(this.secondaryColor, 10);
    this.activationBkgColor = this.secondaryColor;
-    this.sequenceNumberColor = 'white';
+    this.sequenceNumberColor = invert(this.lineColor);

    /* Gantt chart variables */

--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -1,10 +1,21 @@
 import { invert, lighten, darken, rgba, adjust } from 'khroma';
-
+import { mkBorder } from './theme-helpers';
 class Theme {
  constructor() {
    this.background = '#333';
    this.primaryColor = '#1f2020';
    this.secondaryColor = lighten(this.primaryColor, 16);
+
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
    this.mainBkg = '#1f2020';
    this.secondBkg = 'calculated';
    this.mainContrastColor = 'lightgrey';
@@ -127,7 +138,7 @@ class Theme {
    this.fillType6 = adjust(this.primaryColor, { h: 128 });
    this.fillType7 = adjust(this.secondaryColor, { h: 128 });
    /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
  }
  calculate(overrides) {
    if (typeof overrides !== 'object') {
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -1,10 +1,26 @@
-import { lighten, rgba, adjust } from 'khroma';
+import { invert, lighten, rgba, adjust } from 'khroma';
+import { mkBorder } from './theme-helpers';

 class Theme {
  constructor() {
    /* Base variables */
+    this.background = '#f4f4f4';
    this.primaryColor = '#ECECFF';
+
+    this.secondaryColor = adjust(this.primaryColor, { h: 120 });
    this.secondaryColor = '#ffffde';
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
+
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
    this.background = 'white';
    this.mainBkg = '#ECECFF';
    this.secondBkg = '#ffffde';
@@ -124,7 +140,7 @@ class Theme {

    /* state colors */
    /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
    /* journey */
    this.fillType0 = this.primaryColor;
    this.fillType1 = this.secondaryColor;
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -1,7 +1,9 @@
-import { darken, adjust } from 'khroma';
+import { darken, lighten, adjust, invert } from 'khroma';
+import { mkBorder } from './theme-helpers';
 class Theme {
  constructor() {
    /* Base vales */
+    this.background = '#f4f4f4';
    this.primaryColor = '#cde498';
    this.secondaryColor = '#cdffb2';
    this.background = 'white';
@@ -14,8 +16,17 @@ class Theme {
    this.fontFamily = '"trebuchet ms", verdana, arial';
    this.fontSize = '16px';

-    /* Flowchart variables */
+    this.tertiaryColor = lighten('#cde498', 10);
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.primaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);

+    /* Flowchart variables */
    this.nodeBkg = 'calculated';
    this.nodeBorder = 'calculated';
    this.clusterBkg = 'calculated';
@@ -99,7 +110,7 @@ class Theme {

    /* state colors */
    /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
    /* journey */
    this.fillType0 = this.primaryColor;
    this.fillType1 = this.secondaryColor;
--- a/src/themes/theme-helpers.js
+++ b/src/themes/theme-helpers.js
@@ -0,0 +1,4 @@
+import { adjust } from 'khroma';
+
+export const mkBorder = (col, darkMode) =>
+  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -1,4 +1,5 @@
-import { darken, lighten, adjust } from 'khroma';
+import { invert, darken, lighten, adjust } from 'khroma';
+import { mkBorder } from './theme-helpers';

 // const Color = require ( 'khroma/dist/color' ).default
 // Color.format.hex.stringify(Color.parse('hsl(210, 66.6666666667%, 95%)')); // => "#EAF2FB"
@@ -8,7 +9,23 @@ class Theme {
    this.primaryColor = '#eee';
    this.contrast = '#26a';
    this.secondaryColor = lighten(this.contrast, 55);
-    this.background = 'white';
+    this.background = '#ffffff';
+
+    // this.secondaryColor = adjust(this.primaryColor, { h: 120 });
+    this.tertiaryColor = adjust(this.primaryColor, { h: -160 });
+    console.warn('primary color', this.primaryColor, 'tertiary - color', this.tertiaryColor);
+    this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
+    this.secondaryBorderColor = mkBorder(this.secondaryColor, this.darkMode);
+    this.tertiaryBorderColor = mkBorder(this.tertiaryColor, this.darkMode);
+    // this.noteBorderColor = mkBorder(this.noteBkgColor, this.darkMode);
+
+    this.primaryTextColor = invert(this.primaryColor);
+    this.secondaryTextColor = invert(this.secondaryColor);
+    this.tertiaryTextColor = invert(this.tertiaryColor);
+    this.lineColor = invert(this.background);
+    this.textColor = invert(this.background);
+
+    this.altBackground = lighten(this.contrast, 55);
    this.mainBkg = '#eee';
    this.secondBkg = 'calculated';
    this.lineColor = '#666';
@@ -131,7 +148,7 @@ class Theme {

    /* state colors */
    /* class */
-    this.classText = this.nodeBorder;
+    this.classText = this.primaryTextColor;
    /* journey */
    this.fillType0 = this.primaryColor;
    this.fillType1 = this.secondaryColor;