Starting with gantt theme

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;
+}

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;
+}
+/*
+
+
+*/

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;
+}

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;
+}

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;