Fade page when changing between dark and light themeHEADmaster

1 files changed, 15 insertions, 1 deletions

diff --git a/monitor.html b/monitor.html
index c800543..0dbc1ad 100644
--- a/monitor.html
+++ b/monitor.html
@@ -4,14 +4,28 @@
 		<meta charset="UTF-8">
 
 		<style type="text/css">
+			@keyframes todark {
+				from {color: black; background-color: white;}
+				to {color: white; background-color: black;}
+			}
+
+			@keyframes tolight {
+				from {color: white; background-color: black;}
+				to {color: black; background-color: white;}
+			}
+
 			.light {
 				background: white;
 				color: black;
+				animation-name: tolight;
+				animation-duration: 30s;
 			}
 
 			.dark {
 				background: black;
 				color: white;
+				animation-name: todark;
+				animation-duration: 30s;
 			}
 
 			.grid {
@@ -83,7 +97,7 @@
 				document.getElementById("luxIr").innerHTML = data.lux_ir;
 				document.getElementById("luxBs").innerHTML = data.lux_bs;
 
-				if (data.lux < 100) {
+				if (data.lux < 500) {
 					document.body.className = "dark";
 				} else {
 					document.body.className = "light";