diff --git a/dist/mermaid.dark.css b/dist/mermaid.dark.css
new file mode 100644
index 000000000..116a62e46
--- /dev/null
+++ b/dist/mermaid.dark.css
@@ -0,0 +1,275 @@
+/* Flowchart variables */
+/* Sequence Diagram variables */
+/* Gantt chart variables */
+.mermaid .label {
+  color: #333;
+}
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
+  fill: #ECECFF;
+  stroke: #CCCCFF;
+  stroke-width: 1px;
+}
+.edgePath .path {
+  stroke: #333333;
+}
+.edgeLabel {
+  background-color: #e8e8e8;
+}
+.cluster rect {
+  fill: #ffffde !important;
+  rx: 4 !important;
+  stroke: #aaaa33 !important;
+  stroke-width: 1px !important;
+}
+.cluster text {
+  fill: #F9FFFE;
+}
+.actor {
+  stroke: #CCCCFF;
+  fill: #ECECFF;
+}
+text.actor {
+  fill: black;
+  stroke: none;
+}
+.actor-line {
+  stroke: grey;
+}
+.messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: #333;
+}
+.messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  stroke: #333;
+}
+#arrowhead {
+  fill: #333;
+}
+#crosshead path {
+  fill: #333 !important;
+  stroke: #333 !important;
+}
+.messageText {
+  fill: #333;
+  stroke: none;
+}
+.labelBox {
+  stroke: #CCCCFF;
+  fill: #ECECFF;
+}
+.labelText {
+  fill: black;
+  stroke: none;
+}
+.loopText {
+  fill: black;
+  stroke: none;
+}
+.loopLine {
+  stroke-width: 2;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: #CCCCFF;
+}
+.note {
+  stroke: #aaaa33;
+  fill: #fff5ad;
+}
+.noteText {
+  fill: black;
+  stroke: none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+/** Section styling */
+.section {
+  stroke: none;
+  opacity: 0.2;
+}
+.section0 {
+  fill: rgba(255, 255, 255, 0.3);
+}
+.section2 {
+  fill: #EAE8B9;
+}
+.section1,
+.section3 {
+  fill: white;
+  opacity: 0.2;
+}
+.sectionTitle0 {
+  fill: #F9FFFE;
+}
+.sectionTitle1 {
+  fill: #F9FFFE;
+}
+.sectionTitle2 {
+  fill: #F9FFFE;
+}
+.sectionTitle3 {
+  fill: #F9FFFE;
+}
+.sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
+}
+/* Grid and axis */
+.grid .tick {
+  stroke: rgba(255, 255, 255, 0.3);
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid .tick text {
+  fill: #ccc;
+  opacity: 0.5;
+}
+.grid path {
+  stroke-width: 0;
+}
+/* Today line */
+.today {
+  fill: none;
+  stroke: #DB5757;
+  stroke-width: 2px;
+}
+/* Task styling */
+/* Default task */
+.task {
+  stroke-width: 1;
+}
+.taskText {
+  text-anchor: middle;
+  font-size: 11px;
+}
+.taskTextOutsideRight {
+  fill: #323D47;
+  text-anchor: start;
+  font-size: 11px;
+}
+.taskTextOutsideLeft {
+  fill: #323D47;
+  text-anchor: end;
+  font-size: 11px;
+}
+/* Specific task settings for the sections*/
+.taskText0,
+.taskText1,
+.taskText2,
+.taskText3 {
+  fill: #323D47;
+}
+.task0,
+.task1,
+.task2,
+.task3 {
+  fill: #BDD5EA;
+  stroke: rgba(255, 255, 255, 0.5);
+}
+.taskTextOutside0,
+.taskTextOutside2 {
+  fill: #ccc;
+}
+.taskTextOutside1,
+.taskTextOutside3 {
+  fill: #ccc;
+}
+/* Active task */
+.active0,
+.active1,
+.active2,
+.active3 {
+  fill: #81B1DB;
+  stroke: rgba(255, 255, 255, 0.5);
+}
+.activeText0,
+.activeText1,
+.activeText2,
+.activeText3 {
+  fill: #323D47 !important;
+}
+/* Completed task */
+.done0,
+.done1,
+.done2,
+.done3 {
+  fill: lightgrey;
+}
+.doneText0,
+.doneText1,
+.doneText2,
+.doneText3 {
+  fill: #323D47 !important;
+}
+/* Tasks on the critical line */
+.crit0,
+.crit1,
+.crit2,
+.crit3 {
+  stroke: #E83737;
+  fill: #E83737;
+  stroke-width: 2;
+}
+.activeCrit0,
+.activeCrit1,
+.activeCrit2,
+.activeCrit3 {
+  stroke: #E83737;
+  fill: #81B1DB;
+  stroke-width: 2;
+}
+.doneCrit0,
+.doneCrit1,
+.doneCrit2,
+.doneCrit3 {
+  stroke: #E83737;
+  fill: lightgrey;
+  stroke-width: 1;
+  cursor: pointer;
+  shape-rendering: crispEdges;
+}
+.doneCritText0,
+.doneCritText1,
+.doneCritText2,
+.doneCritText3 {
+  fill: #323D47 !important;
+}
+.activeCritText0,
+.activeCritText1,
+.activeCritText2,
+.activeCritText3 {
+  fill: #323D47 !important;
+}
+.titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: #ccc;
+}
+/*
+
+
+*/
+.node text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 14px;
+}
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: #ffffde;
+  border: 1px solid #aaaa33;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100;
+}
diff --git a/src/less/dark/flow.less b/src/less/dark/flow.less
new file mode 100644
index 000000000..96008bc07
--- /dev/null
+++ b/src/less/dark/flow.less
@@ -0,0 +1,29 @@
+.mermaid .label { color:#333 }
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
+  fill: @mainBkg;
+  stroke: @nodeBorder;
+  stroke-width: 1px;
+}
+
+.edgePath .path {
+  stroke: @lineColor;
+}
+
+.edgeLabel {
+  background-color: @edgeLabelBackground;
+}
+
+.cluster rect{
+  fill: @secondBkg !important;
+  rx:4 !important;
+  stroke: @clusterBorder !important;
+  stroke-width: 1px !important;
+}
+
+.cluster text {
+  fill:@titleColor;
+}
diff --git a/src/less/dark/gantt.less b/src/less/dark/gantt.less
new file mode 100644
index 000000000..8b10f2de0
--- /dev/null
+++ b/src/less/dark/gantt.less
@@ -0,0 +1,140 @@
+/** Section styling */
+.section {
+  stroke:none;
+  opacity:0.2;
+}
+.section0{
+  fill:@sectionBkgColor;
+}
+.section2 {
+  fill:@sectionBkgColor2;
+}
+.section1,.section3 {
+  fill:@altSectionBkgColor;
+  opacity:0.2;
+}
+
+.sectionTitle0 { fill:@titleColor;}
+.sectionTitle1 { fill:@titleColor;}
+.sectionTitle2 { fill:@titleColor;}
+.sectionTitle3 { fill:@titleColor;}
+
+
+.sectionTitle {
+  text-anchor:start;
+  font-size:11px;
+  text-height:14px;
+}
+
+/* Grid and axis */
+.grid .tick {
+  stroke: @sectionBkgColor;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid .tick text {
+  fill: @taskTextLightColor;
+  opacity: 0.5;
+}
+.grid path {
+  stroke-width: 0;
+}
+
+/* Today line */
+.today {
+  fill:none;
+  stroke:@todayLineColor;
+  stroke-width:2px;
+}
+
+/* Task styling */
+/* Default task */
+.task {
+  stroke-width: 1;
+}
+
+.taskText {
+  text-anchor:middle;
+  font-size:11px;
+}
+.taskTextOutsideRight {
+  fill:@taskTextDarkColor;
+  text-anchor:start;
+  font-size:11px;
+}
+.taskTextOutsideLeft {
+  fill:@taskTextDarkColor;
+  text-anchor:end;
+  font-size:11px;
+}
+
+/* Specific task settings for the sections*/
+
+.taskText0, .taskText1, .taskText2, .taskText3 {
+  fill:@taskTextColor;
+}
+
+.task0, .task1, .task2, .task3 {
+  fill: @taskBkgColor;
+  stroke: @taskBorderColor;
+}
+
+.taskTextOutside0,.taskTextOutside2, {
+  fill:@taskTextOutsideColor;
+}
+.taskTextOutside1, .taskTextOutside3 {
+  fill:@taskTextOutsideColor;
+}
+
+/* Active task */
+.active0, .active1, .active2, .active3 {
+  fill: @activeTaskBkgColor;
+  stroke: @activeTaskBorderColor;
+}
+
+.activeText0, .activeText1, .activeText2, .activeText3 {
+  fill:@taskTextDarkColor !important;
+}
+/* Completed task */
+.done0, .done1, .done2, .done3 {
+  fill: @doneTaskBkgColor;
+}
+
+.doneText0, .doneText1, .doneText2, .doneText3 {
+  fill:@taskTextDarkColor !important;
+}
+
+/* Tasks on the critical line */
+.crit0, .crit1, .crit2, .crit3 {
+  stroke:@critBorderColor;
+  fill: @critBkgColor;
+  stroke-width:2;
+}
+.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+  stroke:@critBorderColor;
+  fill: @activeTaskBkgColor;
+  stroke-width:2;
+}
+.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+  stroke:@critBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width: 1;
+  cursor: pointer;
+  shape-rendering: crispEdges;
+}
+.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+  fill:@taskTextDarkColor !important;
+}
+.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+  fill:@taskTextDarkColor !important;
+}
+
+.titleText {
+  text-anchor:middle;
+  font-size:18px;
+  fill:@taskTextLightColor;
+}
+/*
+
+
+*/
diff --git a/src/less/dark/mermaid.less b/src/less/dark/mermaid.less
new file mode 100644
index 000000000..236e05673
--- /dev/null
+++ b/src/less/dark/mermaid.less
@@ -0,0 +1,24 @@
+@import "variables";
+@import "flow";
+@import "sequenceDiagram";
+@import "gantt";
+@import "variables";
+
+.node text {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size:14px;
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size: 12px;
+  background: @secondBkg;
+  border: 1px solid @border2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index:100;
+}
diff --git a/src/less/dark/sequenceDiagram.less b/src/less/dark/sequenceDiagram.less
new file mode 100644
index 000000000..1139df345
--- /dev/null
+++ b/src/less/dark/sequenceDiagram.less
@@ -0,0 +1,75 @@
+
+
+.actor {
+  stroke: @actorBorder;
+  fill: @actorBkg;
+}
+text.actor {
+  fill:@actorTextColor;
+  stroke:none;
+}
+
+.actor-line {
+  stroke:@actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width:1.5;
+  stroke-dasharray: "2 2";
+  marker-end:"url(#arrowhead)";
+  stroke:@signalColor;
+}
+
+.messageLine1 {
+  stroke-width:1.5;
+  stroke-dasharray: "2 2";
+  stroke:@signalColor;
+}
+
+#arrowhead {
+  fill:@signalColor;
+}
+#crosshead path {
+  fill:@signalColor !important;
+  stroke: @signalColor !important;
+
+}
+.messageText {
+  fill:@signalTextColor;
+  stroke:none;
+}
+
+.labelBox {
+  stroke: @labelBoxBorderColor;
+  fill: @labelBoxBkgColor;
+}
+
+.labelText {
+  fill:@labelTextColor;
+  stroke:none;
+}
+
+.loopText {
+  fill:@labelTextColor;
+  stroke:none;
+}
+
+.loopLine {
+  stroke-width:2;
+  stroke-dasharray: "2 2";
+  marker-end:"url(#arrowhead)";
+  stroke: @labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: @noteBorderColor;
+  fill: @noteBkgColor;
+}
+
+.noteText {
+  fill:black;
+  stroke:none;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-size:14px;
+}
\ No newline at end of file
diff --git a/src/less/dark/variables.less b/src/less/dark/variables.less
new file mode 100644
index 000000000..5037df012
--- /dev/null
+++ b/src/less/dark/variables.less
@@ -0,0 +1,60 @@
+@mainBkg: #ECECFF;
+@secondBkg: #ffffde;
+@lineColor: #333333;
+@border1:#CCCCFF;
+@border2:#aaaa33;
+
+/* Flowchart variables */
+@nodeBkg:@mainBkg;
+@nodeBorder:@border1;
+
+@clusterBkg:@secondBkg;
+@clusterBorder:@border2;
+
+@defaultLinkColor:@lineColor;
+
+@titleColor: #F9FFFE;
+
+@edgeLabelBackground: #e8e8e8;
+
+/* Sequence Diagram variables */
+@actorBorder: @border1;
+@actorBkg:    @mainBkg;
+@actorTextColor: black;
+@actorLineColor: grey;
+
+@signalColor: #333;
+@signalTextColor: #333;
+
+@labelBoxBkgColor: @actorBkg;
+@labelBoxBorderColor: @actorBorder;
+@labelTextColor: @actorTextColor;
+
+@noteBorderColor: @border2;
+@noteBkgColor:    #fff5ad;
+
+/* Gantt chart variables */
+@sectionBkgColor: rgba(255, 255, 255, 0.3);
+@altSectionBkgColor: white;
+@sectionBkgColor2: #EAE8B9;
+
+@taskBorderColor: rgba(255, 255, 255, 0.5);
+@taskBkgColor: #BDD5EA;
+@taskTextColor: @taskTextDarkColor;
+@taskTextOutsideColor: @taskTextLightColor;
+
+@activeTaskBorderColor: rgba(255, 255, 255, 0.5);
+@activeTaskBkgColor: #81B1DB;
+
+@gridColor: lightgrey;
+
+@doneTaskBkgColor: lightgrey;
+@doneTaskBorderColor: grey;
+
+@critBorderColor: #E83737;
+@critBkgColor: #E83737;
+
+@taskTextLightColor: #ccc;
+@taskTextDarkColor: #323D47;
+
+@todayLineColor: #DB5757;
diff --git a/test/gantt-dark-theme.html b/test/gantt-dark-theme.html
new file mode 100644
index 000000000..829923d36
--- /dev/null
+++ b/test/gantt-dark-theme.html
@@ -0,0 +1,162 @@
+<!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>