Use mix as test file instead

dist/mermaid.dark.css

@@ -8,78 +8,78 @@
 .node circle,
 .node ellipse,
 .node polygon {
-  fill: #ECECFF;
+  fill: #BDD5EA;
-  stroke: #CCCCFF;
+  stroke: #81B1DB;
   stroke-width: 1px;
 }
 .edgePath .path {
-  stroke: #333333;
+  stroke: lightgrey;
 }
 .edgeLabel {
   background-color: #e8e8e8;
 }
 .cluster rect {
-  fill: #ffffde !important;
+  fill: #6D6D65 !important;
   rx: 4 !important;
-  stroke: #aaaa33 !important;
+  stroke: rgba(255, 255, 255, 0.25) !important;
   stroke-width: 1px !important;
 }
 .cluster text {
   fill: #F9FFFE;
 }
 .actor {
-  stroke: #CCCCFF;
+  stroke: #81B1DB;
-  fill: #ECECFF;
+  fill: #BDD5EA;
 }
 text.actor {
   fill: black;
   stroke: none;
 }
 .actor-line {
-  stroke: grey;
+  stroke: lightgrey;
 }
 .messageLine0 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
-  stroke: #333;
+  stroke: lightgrey;
 }
 .messageLine1 {
   stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  stroke: #333;
+  stroke: lightgrey;
 }
 #arrowhead {
-  fill: #333;
+  fill: lightgrey;
 }
 #crosshead path {
-  fill: #333 !important;
+  fill: lightgrey !important;
-  stroke: #333 !important;
+  stroke: lightgrey !important;
 }
 .messageText {
-  fill: #333;
+  fill: lightgrey;
   stroke: none;
 }
 .labelBox {
-  stroke: #CCCCFF;
+  stroke: #81B1DB;
-  fill: #ECECFF;
+  fill: #BDD5EA;
 }
 .labelText {
-  fill: black;
+  fill: #323D47;
   stroke: none;
 }
 .loopText {
-  fill: black;
+  fill: lightgrey;
   stroke: none;
 }
 .loopLine {
   stroke-width: 2;
   stroke-dasharray: "2 2";
   marker-end: "url(#arrowhead)";
-  stroke: #CCCCFF;
+  stroke: #81B1DB;
 }
 .note {
-  stroke: #aaaa33;
+  stroke: rgba(255, 255, 255, 0.25);
   fill: #fff5ad;
 }
 .noteText {
@@ -128,7 +128,7 @@ text.actor {
   shape-rendering: crispEdges;
 }
 .grid .tick text {
-  fill: #ccc;
+  fill: lightgrey;
   opacity: 0.5;
 }
 .grid path {
@@ -175,11 +175,11 @@ text.actor {
 }
 .taskTextOutside0,
 .taskTextOutside2 {
-  fill: #ccc;
+  fill: lightgrey;
 }
 .taskTextOutside1,
 .taskTextOutside3 {
-  fill: #ccc;
+  fill: lightgrey;
 }
 /* Active task */
 .active0,
@@ -239,7 +239,7 @@ text.actor {
 .doneCritText1,
 .doneCritText2,
 .doneCritText3 {
-  fill: #323D47 !important;
+  fill: lightgrey !important;
 }
 .activeCritText0,
 .activeCritText1,
@@ -250,7 +250,7 @@ text.actor {
 .titleText {
   text-anchor: middle;
   font-size: 18px;
-  fill: #ccc;
+  fill: lightgrey;
 }
 /*
 
@@ -267,8 +267,8 @@ div.mermaidTooltip {
   padding: 2px;
   font-family: 'trebuchet ms', verdana, arial;
   font-size: 12px;
-  background: #ffffde;
+  background: #6D6D65;
-  border: 1px solid #aaaa33;
+  border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: 2px;
   pointer-events: none;
   z-index: 100;

src/less/dark/gantt.less

@@ -123,7 +123,7 @@
   shape-rendering: crispEdges;
 }
 .doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
-  fill:@taskTextDarkColor !important;
+  fill:@taskTextLightColor !important;
 }
 .activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
   fill:@taskTextDarkColor !important;

src/less/dark/sequenceDiagram.less

@@ -45,12 +45,12 @@ text.actor {
 }
 
 .labelText {
-  fill:@labelTextColor;
+  fill: @darkTextColor;
   stroke:none;
 }
 
 .loopText {
-  fill:@labelTextColor;
+  fill: @labelTextColor;
   stroke:none;
 }
 
@@ -72,4 +72,4 @@ text.actor {
   stroke:none;
   font-family: 'trebuchet ms', verdana, arial;
   font-size:14px;
-}
+}

src/less/dark/variables.less

@@ -1,8 +1,11 @@
-@mainBkg: #ECECFF;
+@mainBkg: #BDD5EA;
-@secondBkg: #ffffde;
+@secondBkg: #6D6D65;
-@lineColor: #333333;
+@mainContrastColor: lightgrey;
-@border1:#CCCCFF;
+@darkTextColor: #323D47;
-@border2:#aaaa33;
+@lineColor: @mainContrastColor;
+@border1: #81B1DB;
+@border2: rgba(255, 255, 255, 0.25);
+
 
 /* Flowchart variables */
 @nodeBkg:@mainBkg;
@@ -21,14 +24,14 @@
 @actorBorder: @border1;
 @actorBkg:    @mainBkg;
 @actorTextColor: black;
-@actorLineColor: grey;
+@actorLineColor: @mainContrastColor;
 
-@signalColor: #333;
+@signalColor: @mainContrastColor;
-@signalTextColor: #333;
+@signalTextColor: @mainContrastColor;
 
 @labelBoxBkgColor: @actorBkg;
 @labelBoxBorderColor: @actorBorder;
-@labelTextColor: @actorTextColor;
+@labelTextColor: @mainContrastColor;
 
 @noteBorderColor: @border2;
 @noteBkgColor:    #fff5ad;
@@ -39,22 +42,22 @@
 @sectionBkgColor2: #EAE8B9;
 
 @taskBorderColor: rgba(255, 255, 255, 0.5);
-@taskBkgColor: #BDD5EA;
+@taskBkgColor: @mainBkg;
-@taskTextColor: @taskTextDarkColor;
+@taskTextColor: @darkTextColor;
 @taskTextOutsideColor: @taskTextLightColor;
 
 @activeTaskBorderColor: rgba(255, 255, 255, 0.5);
 @activeTaskBkgColor: #81B1DB;
 
-@gridColor: lightgrey;
+@gridColor: @mainContrastColor;
 
-@doneTaskBkgColor: lightgrey;
+@doneTaskBkgColor: @mainContrastColor;
 @doneTaskBorderColor: grey;
 
 @critBorderColor: #E83737;
 @critBkgColor: #E83737;
 
-@taskTextLightColor: #ccc;
+@taskTextLightColor: @mainContrastColor;
-@taskTextDarkColor: #323D47;
+@taskTextDarkColor: @darkTextColor;
 
 @todayLineColor: #DB5757;

test/gantt-dark-theme.html

@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-
-    <script src="../dist/mermaid.js"></script>
-    <style>
-      /* Simulate Darker Themed Page */
-      body {
-        background: #323D47;
-        font-family: sans-serif;
-        color: #ccc;
-      }
-    </style>
-    <link rel="stylesheet" href="../dist/mermaid.dark.css"/>
-    <script>
-        mermaid.initialize({
-                gantt: {
-                    titleTopMargin:25,
-                    barHeight:20,
-                    barGap:4,
-                    topPadding:50,
-                    sidePadding:75,
-                    gridLineStartPadding:5,
-                    fontSize:11,
-                    numberSectionStyles:3,
-                    axisFormatter: [
-                        // Within a day
-                        ["X%I:%M", function (d) {
-                            return d.getHours();
-                        }],
-                        // Monday a week
-                        ["w. %U", function (d) {
-                            return d.getDay() == 1;
-                        }],
-                        // Day within a week (not monday)
-                        ["%a %d", function (d) {
-                            return d.getDay() && d.getDate() != 1;
-                        }],
-                        // within a month
-                        ["%b %d", function (d) {
-                            return d.getDate() != 1;
-                        }],
-                        // Month
-                        ["%m-%y", function (d) {
-                            return d.getMonth();
-                        }]
-                    ]
-                }
-
-        });
-    </script>
-
-</head>
-    <body>
-    <h1>scale tests</h1>
-    <h2>less then a day</h2>
-        <div class="mermaid">
-            gantt
-            dateFormat  YYYY-MM-DD H:mm
-            title Adding GANTT diagram functionality to mermaid
-
-            section Design
-            Design jison grammar            :done, crit, des1, 2014-01-06 1:30,4h
-            Create example text             :done, after des1,6h
-        </div>
-    <h2>less then a week</h2>
-    <div class="mermaid">
-        gantt
-        dateFormat  YYYY-MM-DD
-        title Adding GANTT diagram functionality to mermaid2
-        section Design
-        Design jison grammar            :done, crit, des1, 2014-01-06,2d
-        Create example text             :done, after des1,3d
-    </div>
-    <h2>less then a month</h2>
-    <div class="mermaid">
-        gantt
-        dateFormat  YYYY-MM-DD
-        title Adding GANTT diagram functionality to mermaid
-
-        section Design
-        Design jison grammar            :done, crit, des1, 2015-01-05,2d
-        Create example text             :done, after des1, 2w
-    </div>
-    <h2>less then a year</h2>
-    <div class="mermaid">
-        gantt
-        dateFormat  YYYY-MM-DD
-        title Adding GANTT diagram functionality to mermaid
-
-        section Design
-        Design1:done, crit, des1, 2014-01-22,4w
-        Design2:after des1, 3w
-        Design3:3w
-        Design4:3w
-        Design5:18d
-        Design6:2w
-        Implementation1:3w
-        Implementation2:3w
-    </div>
-    <h1>Other tests</h1>
-    <div class="mermaid">
-        gantt
-        dateFormat  YYYY-MM-DD
-        title Adding GANTT diagram functionality to mermaid
-
-        section Design
-        Design jison grammar            :done, crit, des1, 2014-01-06, 2014-01-09
-        Create example text             :done, des2, 2014-01-06, 3d
-        Bounce gantt example with users :active, crit, des3, after des2, 5d
-
-        section Implementation
-        update build script             :2014-01-06,24h
-        Implement parser and jison      :after des1, 2d
-        Create tests for parser         :active, 3d
-        Future task in critical line                 :crit, 5d
-        Create tests for renderer       :2d
-        Add to mermaid core bore tore gore bore lore             :1d
-
-        section Documentation
-        Describe gantt syntax               :active,a1, 2014-01-10, 3d
-        Add gantt diagram to demo page      :after a1  , 20h
-        Add another diagram to demo page    :after a1  , 48h
-    </div>
-    Text before. Bla b la bla. Look at the diagram below:
-    <div class="mermaid">
-        gantt
-        title A Gantt Diagram
-        dateFormat  YYYY-MM-DD
-        section Section
-        A task           :a1, 2014-01-01, 3d
-        Another task     :after a1  , 20d
-        section Another
-        Task in sec      :2014-01-12  , 12d
-        section Another2
-        anther task      : 24d
-        section Another3
-        anther task      : 24d
-        section Another4
-        anther task      : 24d
-        section Another5
-        anther task      : 24d
-        section Another6
-        anther task      : 24d
-        section Another7
-        anther task      : 24d
-        section Another8
-        anther task      : 24d
-        section Another9
-        anther task      : 24d
-    </div>
-    As you can see, bla bla bla.
-    <div class="mermaid">
-        gantt
-        title A Gantt Diagram
-        dateFormat  YYYY-MM-DD
-        section Section
-        A task           :a1, 2014-01-01, 3h
-    </div>
-    </body>
-</html>

test/mix-dark-theme.html

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <script src="../dist/mermaid.js"></script>
+    <link rel="stylesheet" href="../dist/mermaid.dark.css"/>
+    <script>
+        var mermaid_config = {
+            startOnLoad:true,
+            htmlLabels:true
+        }
+        mermaid.sequenceConfig = {
+            diagramMarginX:50,
+            diagramMarginY:10,
+            boxTextMargin:5,
+            noteMargin:10,
+            messageMargin:35,
+            mirrorActors:true,
+            width:150,
+            // Height of actor boxes
+            height:30
+        };
+        mermaid.ganttConfig = {
+            titleTopMargin:25,
+            barHeight:20,
+            barGap:4,
+            topPadding:50,
+            sidePadding:100,
+            gridLineStartPadding:35,
+            fontSize:11,
+            numberSectionStyles:4,
+            axisFormatter: [
+                // Within a day
+                ["%I:%M", function (d) {
+                    return d.getHours();
+                }],
+                // Monday a week
+                ["w. %U", function (d) {
+                    return d.getDay() == 1;
+                }],
+                // Day within a week (not monday)
+                ["%a %d", function (d) {
+                    return d.getDay() && d.getDate() != 1;
+                }],
+                // within a month
+                ["%b %d", function (d) {
+                    return d.getDate() != 1;
+                }],
+                // Month
+                ["%m-%y", function (d) {
+                    return d.getMonth();
+                }]
+            ]
+        };
+
+        mermaid.startOnLoad=true;
+    </script>
+
+    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+
+    <!-- Optional theme -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+
+    <!-- Simulate Darker Themed Page -->
+    <style>
+      body {
+        background: #323D47;
+        font-family: sans-serif;
+        color: #ccc;
+      }
+    </style>
+
+    <!-- Latest compiled and minified JavaScript -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
+
+</head>
+    <body>
+    <div class="mermaid">graph LR
+        subgraph old sys 1
+        a1(new client)-->b1(sys1 server)
+        oc1(Old client)-->b2
+        end
+
+        subgraph old sys 2
+        a2(new client)-->b2(sys2 server)
+        oc2(Old client)-->b2
+        end
+
+        subgraph old sys 3
+        a3(new client)-->b3(sys3 server)
+        end
+
+        subgraph New sys
+        a1
+        a2
+        a3
+        end
+    </div>
+    <hr/>
+    <div  class="mermaid">
+        graph LR;
+        A[Now with default style on links]--v-->B{a = '1,2'}
+        B-->|v|C[v]
+        B-- ... default style on links -->Z>My default thing this]
+        C-->D{condition};
+
+        linkStyle 0 stroke-width:2px,fill:none,stroke:blue;
+        linkStyle default stroke-width:2px,fill:none,stroke:red;
+
+    </div>
+    <hr/>
+    <div class="mermaid">
+        graph LR
+        A[Square Rect]  --      Link text      -->       B((Circle))
+        A[Square Rect]--v-->D((Circle))
+        A --> C(Round Rect)
+        B    ==  testing ==>     D{Rhombus}
+        C-.->D
+    </div>
+    <hr/>
+    <div class="mermaid">
+        sequenceDiagram
+        participant Alice
+        participant Bob
+        participant John the Long
+        Alice->>Bob: Hello Bob, how are you?
+        loop Outer loop
+        Note left of Alice: Bob thinks about <br/> things <br/> to think about
+        Bob-xBob: I am good thanks!
+        loop Inner loop
+        Bob->>John the Long: How about you John?
+        Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
+        end
+        end
+
+        Bob-->>Alice: Checking with John...
+        Alice->>John the Long: Yes... John, how are you?
+        John the Long-->>Alice: Super!
+    </div>
+    <hr/>
+    <div class="mermaid">
+        gantt
+        dateFormat  YYYY-MM-DD
+        title Adding GANTT diagram functionality to mermaid
+
+        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">
+        info
+    </div>
+    </body>
+</html>