Merge pull request #377 from BHznJNs/master

feat: add dark mode support

README.md

@@ -62,6 +62,12 @@ var gantt = new Gantt("#gantt", tasks, {
 });
 ```
 
+You can add `dark` class to the container element to apply dark theme.
+
+```html
+<div class="gantt-target dark"></div>
+```
+
 ### Contributing
 If you want to contribute enhancements or fixes:
 

dist/frappe-gantt.css

@@ -1,3 +1,71 @@
+.dark > .gantt-container .gantt .grid-header {
+  fill: #252525;
+  stroke: #616161;
+}
+.dark > .gantt-container .gantt .grid-row {
+  fill: #252525;
+}
+.dark > .gantt-container .gantt .grid-row:nth-child(even) {
+  fill: #3e3e3e;
+}
+.dark > .gantt-container .gantt .row-line {
+  stroke: #3e3e3e;
+}
+.dark > .gantt-container .gantt .tick {
+  stroke: #616161;
+}
+.dark > .gantt-container .gantt .today-highlight {
+  opacity: 0.2;
+}
+.dark > .gantt-container .gantt .arrow {
+  stroke: #eee;
+}
+.dark > .gantt-container .gantt .bar {
+  fill: #616161;
+  stroke: none;
+}
+.dark > .gantt-container .gantt .bar-progress {
+  fill: #8a8aff;
+}
+.dark > .gantt-container .gantt .bar-invalid {
+  fill: transparent;
+  stroke: #c6ccd2;
+}
+.dark > .gantt-container .gantt .bar-invalid ~ .bar-label {
+  fill: #ececec;
+}
+.dark > .gantt-container .gantt .bar-label.big {
+  fill: #ececec;
+}
+.dark > .gantt-container .gantt .bar-wrapper:hover .bar {
+  fill: #6e6e6e;
+}
+.dark > .gantt-container .gantt .bar-wrapper:hover .bar-progress {
+  fill: #a4a4ff;
+}
+.dark > .gantt-container .gantt .bar-wrapper.active .bar {
+  fill: #6e6e6e;
+}
+.dark > .gantt-container .gantt .bar-wrapper.active .bar-progress {
+  fill: #a4a4ff;
+}
+.dark > .gantt-container .gantt .upper-text {
+  fill: #a2a2a2;
+}
+.dark > .gantt-container .gantt .lower-text {
+  fill: #f7f7f7;
+}
+
+.dark > .gantt-container .popup-wrapper {
+  background-color: #333;
+}
+.dark > .gantt-container .popup-wrapper .title {
+  border-color: #a4a4ff;
+}
+.dark > .gantt-container .popup-wrapper .pointer {
+  border-top-color: #333;
+}
+
 .gantt .grid-background {
   fill: none;
 }

index.html

@@ -19,6 +19,9 @@
 		.heading {
 			text-align: center;
 		}
+		.gantt-target.dark {
+			background-color: #252525;
+		}
 	</style>
 	<link rel="stylesheet" href="dist/frappe-gantt.css" />
 	<script src="dist/frappe-gantt.js"></script>

src/dark.scss

@@ -0,0 +1,97 @@
+$bar-color-dark: #616161;
+$bar-stroke-dark: #c6ccd2;
+$border-color-dark: #616161;
+$light-bg-dark: #3e3e3e;
+$light-border-color-dark: #3e3e3e;
+$text-muted-dark: #eee;
+$text-light-dark: #ececec;
+$text-color-dark: #f7f7f7;
+$blue-dark: #8a8aff;
+
+.dark > .gantt-container .gantt {
+	.grid-header {
+		fill: #252525;
+		stroke: $border-color-dark;
+	}
+	.grid-row {
+		fill: #252525;
+	}
+	.grid-row:nth-child(even) {
+		fill: $light-bg-dark;
+	}
+	.row-line {
+		stroke: $light-border-color-dark;
+	}
+	.tick {
+		stroke: $border-color-dark;
+	}
+	.today-highlight {
+		opacity: 0.2;
+	}
+
+	.arrow {
+		stroke: $text-muted-dark;
+	}
+
+	.bar {
+		fill: $bar-color-dark;
+		stroke: none;
+	}
+	.bar-progress {
+		fill: $blue-dark;
+	}
+	.bar-invalid {
+		fill: transparent;
+		stroke: $bar-stroke-dark;
+
+        &~.bar-label {
+            fill: $text-light-dark;
+        }
+	}
+
+	.bar-label.big {
+		fill: $text-light-dark;
+	}
+
+	.bar-wrapper {
+		&:hover {
+			.bar {
+				fill: lighten($bar-color-dark, 5);
+			}
+
+			.bar-progress {
+				fill: lighten($blue-dark, 5);
+			}
+		}
+
+		&.active {
+			.bar {
+				fill: lighten($bar-color-dark, 5);
+			}
+
+			.bar-progress {
+				fill: lighten($blue-dark, 5);
+			}
+		}
+	}
+
+	.upper-text {
+		fill: #a2a2a2;
+	}
+	.lower-text {
+		fill: $text-color-dark;
+	}
+}
+
+.dark > .gantt-container {
+	.popup-wrapper {
+		background-color: #333;
+
+		.title {
+			border-color: lighten($blue-dark, 5);;
+		}
+		.pointer {
+			border-top-color: #333;
+		}
+	}
+}

src/gantt.scss

@@ -1,3 +1,5 @@
+@import "./dark.scss";
+
 $bar-color: #b8c2cc !default;
 $bar-stroke: #8D99A6 !default;
 $border-color: #e0e0e0 !default;