diff --git a/dist/mermaid.dark.css b/dist/mermaid.dark.css
index c522857df..df49a4e11 100644
--- a/dist/mermaid.dark.css
+++ b/dist/mermaid.dark.css
@@ -2,7 +2,7 @@
 /* Sequence Diagram variables */
 /* Gantt chart variables */
 .mermaid .label {
-  color: #333;
+  color: #323D47;
 }
 .node rect,
 .node circle,
@@ -50,7 +50,7 @@ text.actor {
   stroke: lightgrey;
 }
 #arrowhead {
-  fill: lightgrey;
+  fill: lightgrey !important;
 }
 #crosshead path {
   fill: lightgrey !important;
diff --git a/src/less/dark/flow.less b/src/less/dark/flow.less
index 96008bc07..2457e77a8 100644
--- a/src/less/dark/flow.less
+++ b/src/less/dark/flow.less
@@ -1,4 +1,4 @@
-.mermaid .label { color:#333 }
+.mermaid .label { color: @darkTextColor }
 
 .node rect,
 .node circle,
@@ -19,11 +19,11 @@
 
 .cluster rect{
   fill: @secondBkg !important;
-  rx:4 !important;
+  rx: 4 !important;
   stroke: @clusterBorder !important;
   stroke-width: 1px !important;
 }
 
 .cluster text {
-  fill:@titleColor;
+  fill: @titleColor;
 }
diff --git a/src/less/dark/gantt.less b/src/less/dark/gantt.less
index 39735635d..338fcd2d2 100644
--- a/src/less/dark/gantt.less
+++ b/src/less/dark/gantt.less
@@ -1,29 +1,29 @@
 /** Section styling */
 .section {
-  stroke:none;
-  opacity:0.2;
+  stroke: none;
+  opacity: 0.2;
 }
 .section0{
-  fill:@sectionBkgColor;
+  fill: @sectionBkgColor;
 }
 .section2 {
-  fill:@sectionBkgColor2;
+  fill: @sectionBkgColor2;
 }
 .section1,.section3 {
-  fill:@altSectionBkgColor;
-  opacity:0.2;
+  fill: @altSectionBkgColor;
+  opacity: 0.2;
 }
 
-.sectionTitle0 { fill:@titleColor;}
-.sectionTitle1 { fill:@titleColor;}
-.sectionTitle2 { fill:@titleColor;}
-.sectionTitle3 { fill:@titleColor;}
+.sectionTitle0 { fill: @titleColor;}
+.sectionTitle1 { fill: @titleColor;}
+.sectionTitle2 { fill: @titleColor;}
+.sectionTitle3 { fill: @titleColor;}
 
 
 .sectionTitle {
-  text-anchor:start;
-  font-size:11px;
-  text-height:14px;
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
 }
 
 /* Grid and axis */
@@ -42,9 +42,9 @@
 
 /* Today line */
 .today {
-  fill:none;
-  stroke:@todayLineColor;
-  stroke-width:2px;
+  fill: none;
+  stroke: @todayLineColor;
+  stroke-width: 2px;
 }
 
 /* Task styling */
@@ -54,24 +54,24 @@
 }
 
 .taskText {
-  text-anchor:middle;
-  font-size:11px;
+  text-anchor: middle;
+  font-size: 11px;
 }
 .taskTextOutsideRight {
-  fill:@taskTextDarkColor;
-  text-anchor:start;
-  font-size:11px;
+  fill: @taskTextDarkColor;
+  text-anchor: start;
+  font-size: 11px;
 }
 .taskTextOutsideLeft {
-  fill:@taskTextDarkColor;
-  text-anchor:end;
-  font-size:11px;
+  fill: @taskTextDarkColor;
+  text-anchor: end;
+  font-size: 11px;
 }
 
 /* Specific task settings for the sections*/
 
 .taskText0, .taskText1, .taskText2, .taskText3 {
-  fill:@taskTextColor;
+  fill: @taskTextColor;
 }
 
 .task0, .task1, .task2, .task3 {
@@ -80,10 +80,10 @@
 }
 
 .taskTextOutside0,.taskTextOutside2, {
-  fill:@taskTextOutsideColor;
+  fill: @taskTextOutsideColor;
 }
 .taskTextOutside1, .taskTextOutside3 {
-  fill:@taskTextOutsideColor;
+  fill: @taskTextOutsideColor;
 }
 
 /* Active task */
@@ -93,7 +93,7 @@
 }
 
 .activeText0, .activeText1, .activeText2, .activeText3 {
-  fill:@taskTextDarkColor !important;
+  fill: @taskTextDarkColor !important;
 }
 /* Completed task */
 .done0, .done1, .done2, .done3 {
@@ -101,38 +101,38 @@
 }
 
 .doneText0, .doneText1, .doneText2, .doneText3 {
-  fill:@taskTextDarkColor !important;
+  fill: @taskTextDarkColor !important;
 }
 
 /* Tasks on the critical line */
 .crit0, .crit1, .crit2, .crit3 {
-  stroke:@critBorderColor;
+  stroke: @critBorderColor;
   fill: @critBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
 }
 .activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
-  stroke:@critBorderColor;
+  stroke: @critBorderColor;
   fill: @activeTaskBkgColor;
-  stroke-width:2;
+  stroke-width: 2;
 }
 .doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
-  stroke:@critBorderColor;
+  stroke: @critBorderColor;
   fill: @doneTaskBkgColor;
   stroke-width: 1;
   cursor: pointer;
   shape-rendering: crispEdges;
 }
 .doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
-  fill:@taskTextLightColor !important;
+  fill: @taskTextLightColor !important;
 }
 .activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
-  fill:@taskTextDarkColor !important;
+  fill: @taskTextDarkColor !important;
 }
 
 .titleText {
-  text-anchor:middle;
-  font-size:18px;
-  fill:@taskTextLightColor;
+  text-anchor: middle;
+  font-size: 18px;
+  fill: @taskTextLightColor;
 }
 /*
 
diff --git a/src/less/dark/sequenceDiagram.less b/src/less/dark/sequenceDiagram.less
index 1e37a086f..c330f5d5d 100644
--- a/src/less/dark/sequenceDiagram.less
+++ b/src/less/dark/sequenceDiagram.less
@@ -5,38 +5,39 @@
   fill: @actorBkg;
 }
 text.actor {
-  fill:@actorTextColor;
-  stroke:none;
+  fill: @actorTextColor;
+  stroke: none;
 }
 
 .actor-line {
-  stroke:@actorLineColor;
+  stroke: @actorLineColor;
 }
 
 .messageLine0 {
-  stroke-width:1.5;
+  stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  marker-end:"url(#arrowhead)";
-  stroke:@signalColor;
+  marker-end: "url(#arrowhead)";
+  stroke: @signalColor;
 }
 
 .messageLine1 {
-  stroke-width:1.5;
+  stroke-width: 1.5;
   stroke-dasharray: "2 2";
-  stroke:@signalColor;
+  stroke: @signalColor;
 }
 
 #arrowhead {
-  fill:@signalColor;
+  fill: @signalColor !important;
 }
+
 #crosshead path {
-  fill:@signalColor !important;
+  fill: @signalColor !important;
   stroke: @signalColor !important;
 
 }
 .messageText {
-  fill:@signalTextColor;
-  stroke:none;
+  fill: @signalTextColor;
+  stroke: none;
 }
 
 .labelBox {
@@ -46,18 +47,18 @@ text.actor {
 
 .labelText {
   fill: @darkTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .loopText {
   fill: @labelTextColor;
-  stroke:none;
+  stroke: none;
 }
 
 .loopLine {
-  stroke-width:2;
+  stroke-width: 2;
   stroke-dasharray: "2 2";
-  marker-end:"url(#arrowhead)";
+  marker-end: "url(#arrowhead)";
   stroke: @labelBoxBorderColor;
 }
 
@@ -68,8 +69,8 @@ text.actor {
 }
 
 .noteText {
-  fill:black;
-  stroke:none;
+  fill: black;
+  stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
-  font-size:14px;
+  font-size: 14px;
 }
diff --git a/test/mix-dark-theme.html b/test/mix-dark-theme.html
index d4e6c4d45..4fd4ab0d6 100644
--- a/test/mix-dark-theme.html
+++ b/test/mix-dark-theme.html
@@ -68,7 +68,6 @@
       body {
         background: #323D47;
         font-family: sans-serif;
-        color: #ccc;
       }
     </style>
 
@@ -106,8 +105,8 @@
         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;
+        linkStyle 0 stroke-width:2px,fill:none,stroke:steelblue;
+        linkStyle default stroke-width:2px,fill:none,stroke:crimson;
 
     </div>
     <hr/>
diff --git a/test/mix.html b/test/mix.html
index 5836902b4..9cd17f34c 100644
--- a/test/mix.html
+++ b/test/mix.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="../dist/mermaid.forest.css"/>
-    <script src="../dist/mermaid.full.js"></script>
+    <script src="../dist/mermaid.js"></script>
     <script>
         var mermaid_config = {
             startOnLoad:true,
@@ -154,7 +154,7 @@
         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