From a7f930a442000b4b0ab796bf052f5e3263173efc Mon Sep 17 00:00:00 2001
From: Clemens Fries <git-iot@xenoworld.de>
Date: Sat, 22 Sep 2018 20:02:41 +0200
Subject: Fade page when changing between dark and light theme

---
 monitor.html | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

(limited to 'monitor.html')

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";
-- 
cgit