#1542 Setting up base theme for custom theming

2025-01-28 07:03:17 +08:00 · 2020-07-27 10:01:34 +02:00 · 2020-07-27 10:01:34 +02:00 · 5a7d770a58
commit 5a7d770a58
parent 4e12f959fc
10 changed files with 547 additions and 46 deletions
--- a/cypress/platform/showcase_base.html
+++ b/cypress/platform/showcase_base.html
@ -0,0 +1,227 @@
+<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: #0c0c0c; */
+        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">
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        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">
+%%{init: {'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" >
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+
+        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">
+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">
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+      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">
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+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: '#ff0000'},
+        // 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/docs/_sidebar.md
+++ b/docs/_sidebar.md
@ -28,5 +28,6 @@
 - Beginner's Guide
  - [overview](n00b-overview.md)
  - [Getting started - easier](n00b-gettingStarted.md)
+  - [Theming](theming.md)
  - [Diagram syntax intro](n00b-syntaxReference.md)
  - [Advanced usage](n00b-advanced.md)
--- a/docs/index.html
+++ b/docs/index.html
@ -8,8 +8,8 @@
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <!-- <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css"> -->
  <link rel="stylesheet" href="theme.css">
-  <script src="//cdn.jsdelivr.net/npm/mermaid@8.6.4/dist/mermaid.min.js"></script>
-  <!-- <script src="http://localhost:9000/mermaid.js"></script> -->
+  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.6.4/dist/mermaid.min.js"></script> -->
+  <script src="http://localhost:9000/mermaid.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
--- a/docs/theming.md
+++ b/docs/theming.md
@ -2,7 +2,7 @@

 Mermaid as a system for theming in place. With it a site integrator can override a vast majority of attributes used when rendering a diagram.

-The settings for a thime can be set globally for the site with the initialize call. The example below highlights how that can look:
+The settings for a theme can be set globally for the site with the initialize call. The example below highlights how that can look:

 ```
 // example
@ -11,14 +11,255 @@ The settings for a thime can be set globally for the site with the initialize ca
 It is also possible to override theme settings locally in a diagram using directives.

 ```
- // example
+%%{init: {'theme':'base'}}%%
+  graph TD
+    a --> b
 ```

-The easiest way to make a custom theme is to start with the base theme, the theme named base and just modify these three variables:
+The easiest way to make a custom theme is to start with the base theme, the theme named base and just modify these variables:
 * primaryColor   - the base color for the theme
-* secondaryColor - A compliment color to the primary color. This color is made lighter and used as background in subgraphs for instance

-More specific color variables it is åpossible to change:
+More specific color variables it is possible to change:
 * lineColor
 * textColor

+Here is an example of a showcase flowchart with theme set to base, with the default variables set:
+```mermaid
+%%{init: {'theme':'base'}}%%
+        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
+```
+
+Here is an example of overriding the primary color and giving everything a little different look.
+```mermaid
+%%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%%
+        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
+```
+As the theming engine is using color codes to calculate values from the base color/base colors it needs proper color values contrain the actual color data. Aliases like color names is not supported so for instance, the color value 'red' will not work but '#ff0000' will work.
+
+## Showcases
+
+When adjusting a theme it might be helpful to look at the theme with these diagrams to evaluate that everything is visiable and looks good.
+
+### flowchart
+```
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        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
+```
+```mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        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
+```
+
+### flowchart (beta)
+```mermaid
+%%{init: {'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
+```
+
+### Sequence diagram
+
+```mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+
+        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
+```
+
+### Gantt
+
+```mermaid
+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
+```
+
+### State diagram
+```mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+      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 --> [*]
+
+```
+
+### State diagram (beta)
+
+```mermaid
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+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 --> [*]
+```
+
+### Entity Relations diagram
+
+```mermaid
+      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"
+```
+
+### User journet diagram
+```mermaid
+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
+```
--- a/src/diagrams/er/styles.js
+++ b/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;
      }
--- a/src/diagrams/gantt/styles.js
+++ b/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);
  }
--- a/src/diagrams/state/stateRenderer-v2.js
+++ b/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);
    }
--- a/src/diagrams/state/styles.js
+++ b/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};
 }
--- a/src/themes/index.js
+++ b/src/themes/index.js
@ -1,6 +1,6 @@
 import { getThemeVariables as baseThemeVariables } from './theme-base';
 import { getThemeVariables as darkThemeVariables } from './theme-dark';
-import { getThemeVariables as defaultThemeVariables } from './theme-default';
+import { getThemeVariables as defaultThemeVariables } from './theme-base';
 import { getThemeVariables as forestThemeVariables } from './theme-forest';
 import { getThemeVariables as neutralThemeVariables } from './theme-neutral';

--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@ -1,53 +1,74 @@
-import { darken, lighten, adjust } from 'khroma';
+import { darken, lighten, adjust, invert } from 'khroma';

+const mkBorder = (col, darkMode) =>
+  darkMode ? adjust(col, { s: -40, l: 10 }) : adjust(col, { s: -40, l: -10 });
 class Theme {
  constructor() {
-    /* Base variables */
-    this.primaryColor = '#9f33be';
-    this.secondaryColor = '#b20238';
-    this.tertiaryColor = lighten(this.primaryColor, 30);
-    this.relationColor = '#000';
+    /** # 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';
+    /** * 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';
+    // this.primaryColor = '#9f33be';
+    this.primaryColor = '#f0fff0';
    // this.primaryColor = '#fa255e';
+    // this.primaryColor = '#ECECFF';
+
    // this.secondaryColor = '#c39ea0';
    // this.tertiaryColor = '#f8e5e5';

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

-    this.background = 'white';
-    this.lineColor = '#333333';
    this.border1 = '#9370DB';
    this.arrowheadColor = '#333333';
    this.fontFamily = '"trebuchet ms", verdana, arial';
    this.fontSize = '16px';
-    this.labelBackground = '#e8e8e8';
    this.textColor = '#333';
-    this.noteBkgColor = '#fff5ad';
-    this.noteBorderColor = '#aaaa33';
    this.updateColors();
+    this.relationColor = '#000';
  }
  updateColors() {
    this.secondBkg = this.tertiaryColor;

+    /* Main */
+    this.secondaryColor = adjust(this.primaryColor, { h: 120 });
+    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);
+
    /* Flowchart variables */

    this.nodeBkg = this.primaryColor;
    this.mainBkg = this.primaryColor;
-    this.nodeBorder = darken(this.primaryColor, 23); // border 1
+    this.nodeBorder = this.primaryBorderColor;
    this.clusterBkg = this.tertiaryColor;
-    this.clusterBorder = darken(this.tertiaryColor, 30);
+    this.clusterBorder = this.tertiaryBorderColor;
    this.defaultLinkColor = this.lineColor;
-    this.titleColor = this.textColor;
+    this.titleColor = this.tertiaryTextColor;
    this.edgeLabelBackground = this.labelBackground;

    /* Sequence Diagram variables */

    // this.actorBorder = lighten(this.border1, 0.5);
-    this.actorBorder = lighten(this.border1, 23);
+    this.actorBorder = this.primaryBorderColor;
    this.actorBkg = this.mainBkg;
-    this.actorTextColor = 'black';
+    this.actorTextColor = this.primaryTextColor;
    this.actorLineColor = 'grey';
    this.labelBoxBkgColor = this.actorBkg;
    this.signalColor = this.textColor;
@ -55,29 +76,21 @@ class Theme {
    this.labelBoxBorderColor = this.actorBorder;
    this.labelTextColor = this.actorTextColor;
    this.loopTextColor = this.actorTextColor;
-    this.noteBorderColor = this.border2;
-    this.noteTextColor = this.actorTextColor;
+    // this.noteTextColor = this.actorTextColor;
    this.activationBorderColor = darken(this.secondaryColor, 10);
    this.activationBkgColor = this.secondaryColor;
    this.sequenceNumberColor = 'white';

    /* Gantt chart variables */

-    this.taskTextColor = this.taskTextLightColor;
-    this.taskTextOutsideColor = this.taskTextDarkColor;
    this.sectionBkgColor = this.tertiaryColor;
    this.altSectionBkgColor = 'white';
    this.sectionBkgColor = this.secondaryColor;
    this.sectionBkgColor2 = this.tertiaryColor;
    this.altSectionBkgColor = 'white';
    this.sectionBkgColor2 = this.primaryColor;
-    this.taskBorderColor = lighten(this.primaryColor, 23);
+    this.taskBorderColor = this.primaryBorderColor;
    this.taskBkgColor = this.primaryColor;
-    this.taskTextLightColor = 'white';
-    this.taskTextColor = 'calculated';
-    this.taskTextDarkColor = 'black';
-    this.taskTextOutsideColor = 'calculated';
-    this.taskTextClickableColor = '#003163';
    this.activeTaskBorderColor = this.primaryColor;
    this.activeTaskBkgColor = lighten(this.primaryColor, 23);
    this.gridColor = 'lightgrey';
@ -86,9 +99,17 @@ class Theme {
    this.critBorderColor = '#ff8888';
    this.critBkgColor = 'red';
    this.todayLineColor = 'red';
+    this.taskTextColor = this.textColor;
+    this.taskTextOutsideColor = this.textColor;
+    this.taskTextLightColor = this.textColor;
+    this.taskTextColor = this.primaryTextColor;
+    this.taskTextDarkColor = this.textColor;
+    this.taskTextOutsideColor = 'calculated';
+    this.taskTextClickableColor = '#003163';

    /* state colors */
-    this.labelColor = 'black';
+    this.labelColor = this.primaryTextColor;
+    this.altBackground = this.tertiaryColor;
    this.errorBkgColor = '#552222';
    this.errorTextColor = '#552222';