From 87f12c7d5ad97652dcd052ae664d910b0a63c91e Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut@sveido.com>
Date: Fri, 31 Jul 2020 16:04:12 +0200
Subject: [PATCH] Updated with a small example of a custom theme

---
 cypress/platform/current.html | 25 ++++++++++++-------
 docs/theming.md               | 47 ++++++++++++++++++++++++++++++++---
 2 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index bd4c6315e..cd89dbc13 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -74,15 +74,22 @@ stateDiagram-v2
   A --> D: asd123
       </div>
       </div>
-      %%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
       <div class="mermaid" style="width: 50%; height: 20%;">
-        %%{init: {'theme': 'dark'}}%%
-
-        flowchart TB
-        subgraph apa
-          a --> A %% comment
-          a --> a{apa} %% comment
-        end
+        %%{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
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
 graph TD
@@ -106,7 +113,7 @@ Note over Bob,Alice: Looks back
           // console.error('Mermaid error: ', err);
         };
       mermaid.initialize({
-        theme: 'forest',
+        // theme: 'forest',
         // themeVariables:{primaryColor: '#ff0000'},
         // arrowMarkerAbsolute: true,
         // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
diff --git a/docs/theming.md b/docs/theming.md
index 6610c7359..46726f049 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -152,10 +152,9 @@ Variables derived from the ones above:
 | name      | Default value | Description |
 
 
-**Here is an example of overriding `primaryColor` and giving everything a ifferent look, using `%%init%%`.
+**Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
 ```
-mermaid
-%%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%%
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)
           B --> C{Let me think}
@@ -171,6 +170,48 @@ mermaid
             G
           end
 ```
+
+Thsi got a bit to dark and bit to colorful. With some easy steps this can be fixed:
+
+* Make the primary color a little lighter
+* set the teriary color to a redish shade as well
+* make the edge label background differ from the subgraph by setting the edgeLabelBackground
+
+```
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
+        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: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
+        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
+```
+
 The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
 
 # Common theming activities