Dark mode addded

client/src/assets/style.css

@@ -1,3 +1,44 @@
+:root {
+  --main-bg-color: #eee;
+	--main-fg-color: #000;
+	--button-bg-color: #3988FF;
+	--button-fg-color: #fff;
+	--button-hover-bg-color: #0F6FFF;
+	--button-hover-fg-color: #fff;
+	--button-cancel-bg-color: transparent;
+	--button-cancel-fg-color: #000;
+	--button-remove-bg-color: transparent;
+	--button-remove-fg-color: #f00;
+	--header-bg-color: #fff;
+	--header-spacer-color: #ddd;
+	--header-shadow: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,0.6) 100%);
+	--box-bg-color: #fff;
+	--box-fg-color: #111;
+	--box-loader-bg-color: rgba(128, 128, 128, 0.3);
+	--box-loader-fg-color: #fff;
+	--box-action-fg-color: #666;
+	--box-preview-bg-color: #3988FF;
+	--box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
+	--modal-overlay-bg-color: rgba(0,0,0,0.2);
+	--graph-axis-fg-color: #777;
+	--graph-grid-color: rgb(238, 238, 238);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--main-bg-color: #222;
+		--main-fg-color: #b8b8b8;
+		--header-bg-color: #000;
+		--header-spacer-color: #333;
+		--header-shadow: none;
+		--box-bg-color: #111;
+		--box-fg-color: #eee;
+		--box-shadow: none;
+		--graph-axis-fg-color: #666;
+		--graph-grid-color: rgb(25, 25, 25);
+	}
+}
+
 body, html {
 	padding: 0;
 	margin: 0;
@@ -6,7 +47,8 @@ body, html {
 }
 
 body {
-	background: #eee;
+	background: var(--main-bg-color);
+	color: var(--main-fg-color);
 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -15,8 +57,8 @@ button, input, select {
 }
 
 button {
-	background: #3988FF;
+	background: var(--button-bg-color);
-	color: #fff;
+	color: var(--button-fg-color);
 	cursor: pointer;
 	border: none;
 	padding: 0.25rem 1rem;
@@ -26,7 +68,8 @@ button {
 }
 
 button:hover {
-	background-color: #0F6FFF;
+	background-color: var(--button-hover-bg-color);
+	color: var(--button-hover-fg-color);
 }
 
 input, select {
@@ -66,8 +109,9 @@ input, select {
 }
 
 .box {
-	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
+	box-shadow: var(--box-shadow);
-	background-color: #fff;
+	background-color: var(--box-bg-color);
+	color: var(--box-fg-color);
 	border-radius: 0.5rem;
 }
 
@@ -81,7 +125,7 @@ input, select {
 	display: none;
 	justify-content: center;
 	align-items: flex-start;
-	background-color: rgba(0,0,0,0.2);
+	background-color: var(--modal-overlay-bg-color);
 	z-index: 5;
 }
 
@@ -90,9 +134,10 @@ input, select {
 }
 
 .settings-modal .inner {
-	background: #fff;
+	background-color: var(--box-bg-color);
+	color: var(--box-fg-color);
 	margin-top: 5%;
-	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
+	box-shadow: var(--box-shadow);
 	border-radius: 0.5rem;
 	width: 20rem;
 }
@@ -108,8 +153,8 @@ input, select {
 
 .settings-modal .actions .remove {
 	margin-right: auto;
-	background-color: transparent;
+	background-color: var(--button-remove-bg-color);
-	color: #ff0000;
+	color: var(--button-remove-fg-color);
 }
 
 form {
@@ -133,8 +178,8 @@ form .actions button {
 }
 
 form .actions button.cancel {
-	background-color: transparent;
+	background-color: var(--button-cancel-bg-color);
-	color: #000;
+	color: var(--button-cancel-fg-color);
 }
 
 form.horizontal {
@@ -158,12 +203,12 @@ form.horizontal .input label {
 	align-items: center;
 	justify-content: flex-end;
 	padding: 0.5rem 0.5rem;
-	background-color: #fff;
+	background-color: var(--header-bg-color);
 }
 
 .dashboard-head .shadow {
 	position: absolute;
-	background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,0.6) 100%);
+	background: var(--header-shadow);
 	width: 100%;
 	height: 8px;
 	z-index: 1;
@@ -172,7 +217,7 @@ form.horizontal .input label {
 .dashboard-head .spacer {
 	margin: 0 1rem;
 	width: 1px;
-	background: #ddd;
+	background: var(--header-spacer-color);
 	height: 20px;
 }
 
@@ -230,8 +275,8 @@ form.horizontal .input label {
 	right: 0;
 	top: 0;
 	bottom: 0;
-	background-color: rgba(128, 128, 128, 0.3);
+	background-color: var(--box-loader-bg-color);
-	color: #fff;
+	color: var(--box-loader-fg-color);
 	font-size: 300%;
 	z-index: 2;
 }
@@ -311,7 +356,7 @@ form.horizontal .input label {
 	margin-left: 0.25rem;
 	font-size: 110%;
 	cursor: pointer;
-	color: #666;
+	color: var(--box-action-fg-color);
 }
 
 .grid-sensors .grid-box .box .body {
@@ -329,7 +374,7 @@ form.horizontal .input label {
 
 .grid-sensors .box-preview {
 	position: absolute;
-	background-color: #3988FF;
+	background-color: var(--box-preview-bg-color);
 	opacity: 0.5;
 	transition: all 0.2s;
 	z-index: 1;

client/src/pages/dashboard/components/BoxGraphContent.tsx

@@ -36,6 +36,18 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
 
 	useEffect(() => {
 		if (bodyRef.current && values.data) {
+			const bgColor = getComputedStyle(
+				document.documentElement
+			).getPropertyValue('--box-bg-color')
+
+			const axisFgColor = getComputedStyle(
+				document.documentElement
+			).getPropertyValue('--graph-axis-fg-color')
+
+			const gridColor = getComputedStyle(
+				document.documentElement
+			).getPropertyValue('--graph-grid-color')
+
 			// TODO: These should be probably returned by server, could be outdated
 			const from = filter.customFrom
 			const to = filter.customTo
@@ -79,7 +91,14 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
 					},
 				],
 				{
-					xaxis: { range: [from, to], type: 'date' },
+					plot_bgcolor: bgColor,
+					paper_bgcolor: bgColor,
+					xaxis: {
+						range: [from, to],
+						type: 'date',
+						tickfont: { color: axisFgColor },
+						gridcolor: gridColor,
+					},
 					yaxis: {
 						...(customRange && {
 							range: [
@@ -88,6 +107,8 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
 							],
 						}),
 						...(data.unit && { ticksuffix: ` ${data.unit}` }),
+						tickfont: { color: axisFgColor },
+						gridcolor: gridColor,
 					},
 					margin: {
 						l: 70,