Dark Mode

Author: kimbtech

VERSION

@@ -1,4 +1,4 @@
 latest
-0.4.3
+0.4.4
 0.4
 0

php/core/templates/main_en.html

@@ -23,8 +23,10 @@
 		<link rel="apple-touch-icon" href="%%SERVERURL%%/load/icon.png">
 
 		<link rel="stylesheet" type="text/css" href="%%SERVERURL%%/load/jquery-ui.min.css?%%VERSIONSEED%%">
-		<link rel="stylesheet" type="text/css" href="%%SERVERURL%%/load/jquery-ui-light.theme.min.css?%%VERSIONSEED%%">
+		<link rel="stylesheet" type="text/css" href="%%SERVERURL%%/load/jquery-ui-light.theme.min.css?%%VERSIONSEED%%" media="screen and (prefers-color-scheme: light)">
+		<link rel="stylesheet" type="text/css" href="%%SERVERURL%%/load/jquery-ui-dark.theme.min.css?%%VERSIONSEED%%" media="screen and (prefers-color-scheme: dark)">
 		<link rel="stylesheet" type="text/css" href="%%SERVERURL%%/load/bootstrap.min.css?%%VERSIONSEED%%">
+		<link rel="stylesheet" type="text/css" href="%%SERVERURL%%/load/bootstrap-dark.min.css?%%VERSIONSEED%%" media="screen and (prefers-color-scheme: dark)">
 		<link rel="stylesheet" type="text/css" href="%%SERVERURL%%/load/main.css?%%VERSIONSEED%%">
 
 		<script src="%%SERVERURL%%/load/jquery.min.js?%%VERSIONSEED%%"></script>

php/core/templates/stats_en.html

@@ -198,6 +198,7 @@ <h3>Graph</h3>
 				if(chart !== null){
 					chart.destroy();
 				}
+				Chart.defaults.global.legend.labels.fontColor = getComputedStyle(document.documentElement).getPropertyValue('--main-text-color');
 				chart = createGraph(
 					combiData,
 					plainData,

php/load/bootstrap-dark.min.css

@@ -1,16 +1,42 @@
+/* Colors */
+:root {
+	--main-text-color: black;
+	--main-bg-color: white;
+	--main-link-color: blue;
+	--main-border-color: black;
+
+	--body-bg: #777;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--main-text-color: #eee;
+		--main-bg-color: #111;
+		--main-link-color: lightblue;
+		--main-border-color: #aaa;
+
+		--body-bg: black;
+	}
+
+	input, select, textarea {
+		background-color: var(--main-bg-color) !important;
+		color: var(--main-text-color) !important;
+	}
+}
+
 body{
 	font-family:Ubuntu,sans-serif;
 	font-size:100%;
-	background-color:#777;
+	background-color: var(--body-bg);
 }
 h1{
-	color:black;
+	color: var(--main-text-color);
 	border-bottom: 1px solid #5d7;
 	text-align:center;
 	font-type: bold;
 }
 h2{
-	color:black;
+	color:var(--main-text-color);
 	border-bottom: 1px solid #5d7;
 	text-align:left;
 	font-type: bold;
@@ -20,11 +46,11 @@ h1,h2,h3,h4{
 }
 
 div#main{
-	border: 1px solid black;
+	border: 1px solid var(--main-border-color);
 	margin:auto;
 	min-width: 350px;
 	max-width: 1600px;
-	background-color: white;
+	background-color: var(--main-bg-color);
 	padding: 5px;
 	border-radius: 4px;
 	min-height: 300px;

php/load/jquery-ui-dark.theme.min.css

@@ -16,7 +16,7 @@ $(() => {
 					$("div#confirmDialog").dialog('close');
 					ok();
 				},
-				"Abbrechen" : () => {
+				"Cancel" : () => {
 					$("div#confirmDialog").dialog('close');
 				}
 			}