added dark mode

src/main/resources/static/css/style.css

@@ -7,6 +7,10 @@ body {
 	height: calc(100% - 56px);
 }
 
+[data-bs-theme=dark] body {
+	background-color: rgb(36, 31, 49);
+}
+
 .openedSelect {
 	overflow: auto;
 }
@@ -21,6 +25,10 @@ body {
 	color: black;
 }
 
+[data-bs-theme=dark] .navlinkstyle {
+	color: #aaa;
+}
+
 .navlinkstyle:hover {
 	color: #1a5fb4;
 }
@@ -29,6 +37,11 @@ body {
 	background-color: ghostwhite;
 }
 
+[data-bs-theme=dark] .navback {
+	color: ghostwhite;
+	background-color: #222;
+}
+
 .tabdivblurred {
 	padding: 8px;
 	padding-bottom: 0px;
@@ -43,6 +56,10 @@ body {
 	background-image: linear-gradient(to bottom, #ffc, #ee0) !important;
 }
 
+[data-bs-theme=dark] .noty {
+	background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(229, 165, 10)) !important;
+}
+
 .glassy {
 	background-color: rgba(0, 0, 0s, 0.1);
 }
@@ -56,6 +73,10 @@ body {
 	min-width: 95vw !important;
 }
 
+[data-bs-theme=dark] .formpane {
+	background: #111;
+}
+
 .menudangerbutton {
 	color: #e00 !important;
 	border: 1px solid rgba(0, 0, 0, 0);
@@ -86,6 +107,11 @@ body {
 		!important;
 }
 
+[data-bs-theme=dark] .page {
+		background-image: linear-gradient(to bottom, #123, #111)
+		!important;
+}
+
 .emph {
 	border-radius: 3px !important;
 	border: 1px solid #3070b0 !important;
@@ -94,6 +120,13 @@ body {
 		!important;
 }
 
+[data-bs-theme=dark] .emph {
+	color: #ffffff !important;
+	background-image: linear-gradient(to bottom, #113531 0%, #135 100%)
+		!important;
+	
+}
+
 .doneoverviewtext {
 	font-size: 120%;
 }
@@ -246,6 +279,10 @@ body {
 	border: 1px solid silver;
 }
 
+[data-bs-theme=dark] .tab-pane-table {
+	background-color: rgb(36, 31, 49);
+}
+
 .tab-pane-glassy {
 	background: rgba(255, 255, 255, 0.5);
 	padding: 8px;

src/main/resources/static/js/clock.js

@@ -4,29 +4,30 @@
  * Coolock Definition
  */
 class Clock {
-	constructor(size, selector, color, background) {
+	constructor(size, selector, arrowcolor, scalecolor, backgroundcolor) {
 
 		var canvas = $("<canvas>");
 		canvas.attr("id", "clockPanel");
 		canvas.attr("width", size);
 		canvas.attr("height", size);
 		canvas.css("border-radius", "4px");
-		canvas.css("background", background);
+		canvas.css("background", backgroundcolor);
 		canvas[0].getContext("2d").canvas.width = size;
-		canvas[0].getContext("2d").canvas.height = size - 3; // -3 removes unneeded overlap
+		canvas[0].getContext("2d").canvas.height = size;
 
 		$(selector).append(canvas);
 		var ctx = canvas[0].getContext("2d");
 		this.ctx = ctx;
 		this.size = size;
-		this.background = background;
-		this.color = color;
+		this.background = backgroundcolor;
+		this.color = arrowcolor;
+		this.scalecolor = scalecolor;
 
 		this.redraw();
 	}
 
 	drawCircle = function(ctx, x, y, r, w) {
-		ctx.strokeStyle = this.color;
+		ctx.strokeStyle = this.background;
 		ctx.lineWidth = w;
 		ctx.beginPath();
 		ctx.arc(x, y, r, 0, 2 * Math.PI);
@@ -35,7 +36,7 @@ class Clock {
 
 	drawArrow = function(ctx, x1, y1, x2, y2, col) {
 		ctx.strokeStyle = col;
-		ctx.fillStyle = this.color;
+		ctx.fillStyle = this.background;
 		ctx.lineCap = "round";
 		ctx.lineWidth = 2;
 		ctx.beginPath();

src/main/resources/static/js/helper.js

@@ -1,3 +1,9 @@
+toggleTheme = function() {
+	var oldValue = $("html").attr("data-bs-theme");
+	var newValue = oldValue == "dark" ? "light" : "dark";
+	$("html").attr("data-bs-theme", newValue);
+}
+
 resetValue = function(selector, value) {
 	$(selector).val(value);
 	$(selector).change();