ctucx.git: mqtt-webui

add dark theme support

diff --git a/src/webui.css b/src/webui.css
@@ -1,15 +1,46 @@
 @media screen {
 	:root {
+		color-scheme:                      normal;
+		--body-background-color:           #f8f9fa;
 		--background-color:                #f8f9fa;
 		--nav-background-color:            rgba(248, 249, 250, 0.3);
 		--nav-scroll-border-color:         rgba(0, 0, 0, 0.125);
 		--section-header-background-color: #f8f9fa;
+		--section-background-color:        #fff;
 		--section-border-color:            rgba(0, 0, 0, 0.125);
 		--text-color:                      #212529;
+		--secondary-text-color:            #212529;
 		--icon-color:                      #212529;
 		--toggle-background-color:         #ccc;
 		--toggle-knob-color:               #6c757d;
 		--toggle-knob-active-color:        #693;
+		--slider-background-color:         #ccc;
+		--slider-knob-color:               #6c757d;
+	}
+}
+
+@media screen and (prefers-color-scheme: dark) {
+	:root {
+		color-scheme:                      dark;
+		--body-background-color:           #2c2c2eff;
+		--background-color:                #1c1c1eff;
+		--nav-background-color:            #2c2c2e4b;
+		--nav-scroll-border-color:         #ebebf52e;
+		--section-header-background-color: #2c2c2eff;
+		--section-background-color:        #1c1c1e4b;
+		--section-border-color:            #ebebf52e;
+		--text-color:                      #fff;
+		--secondary-text-color:            #ebebf599;
+		--icon-color:                      #fff;
+		--toggle-background-color:         #ebebf52e;
+		--toggle-knob-color:               #9b9aa3;
+		--toggle-knob-active-color:        #693;
+		--slider-background-color:         #ebebf52e;
+		--slider-knob-color:               #9b9aa3;
+	}
+
+	section img {
+		filter: invert(.8);
 	}
 }
 

@@ -25,7 +56,7 @@ body {
 	line-height: 1.5;
 	color: var(--text-color);
 	text-align: left;
-	background-color: var(--background-color) !important;
+	background-color: var(--body-background-color) !important;
 	padding-top: 70px;
 }
 

@@ -116,16 +147,18 @@ section {
 }
 
 section > div {
-	background-color: #fff;
-	padding: 0.25rem;
+	background-color: var(--section-background-color);
 	border-bottom: 1px solid var(--section-border-color);
+	padding: 0.25rem;
+	color: var(--secondary-text-color);
 	display: flex;
 	align-self: center !important;
 }
 
 section > div:first-child {
-	background-color: var(--section-header-background-color);
+	color: var(--text-color);
 	padding-left: 1em;
+	background-color: var(--section-header-background-color);
 	border-top-left-radius: inherit;
 	border-top-right-radius: inherit;
 }

@@ -190,7 +223,7 @@ section > div .title{
 	-webkit-appearance: none;
 	height: 10px;
 	border-radius: 5px;   
-	background: #ccc;
+	background: var(--slider-background-color);
 	outline: none;
 }
 

@@ -199,8 +232,9 @@ section > div .title{
 	appearance: none;
 	width: 20px;
 	height: 20px;
-	border-radius: 50%; 
-	background: #6c757d;
+	border-radius: 50%;
+	border: 0;
+	background: var(--slider-knob-color);
 	cursor: pointer;
 	box-shadow: var(--c,0) 0 0 #ccc;
 }

@@ -209,23 +243,25 @@ section > div .title{
 	width: 20px;
 	height: 20px;
 	border-radius: 50%;
-	background: #6c757d;
+	border: 0;
+	background: var(--slider-knob-color);
 	cursor: pointer;
 	box-shadow: var(--c,0) 0 0 #ccc;
 }
 
 
 .loader {
-	border: 4px solid #ccc; /* Pick even numbers here */
-	border-top: 4px solid #6c757d; /* Pick even numbers here */
+	border: 4px solid #ccc;
+	border-top: 4px solid #6c757d;
 	border-radius: 50%;
-	width: 32px; /* Pick even numbers here */
-	height: 32px; /* Pick even numbers here */
+	width: 32px;
+	height: 32px;
 	animation: spin 1.5s linear infinite;
 	display: inline-block;
 	vertical-align: middle;
 }
 
+
 .working {
 	background-color: lightgray;
 	animation-name: color;

@@ -251,9 +287,14 @@ section > div .title{
 }
 
 @media screen and (max-width: 700px) {
+	body {
+		padding-top: 58px;
+	}
+
 	section > div:last-child {
 		border-bottom: 1px solid var(--section-border-color);
 	}
+
 	section {
 		border-radius: 0;
 		border-width:  0;

diff --git a/www/index.html b/www/index.html
@@ -1,20 +1,31 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<title>Smart-Home</title>
+
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
 		<meta name="apple-mobile-web-app-capable" content="yes">
-		<meta name="theme-color" content="#f8f9fa">
-		<link rel="apple-touch-icon" href="./favicon-512x512.png">
 		<meta name="apple-mobile-web-app-title" content="Smart-Home">
+		<link rel="apple-touch-icon" href="./favicon-512x512.png">
+
+		<meta name="theme-color" content="#f8f9fa" media="(prefers-color-scheme: light)">
+		<meta name="theme-color" content="#2c2c2e" media="(prefers-color-scheme: dark)">
+
 		<link rel="stylesheet" href="./bundle.css">
 		<link rel="manifest" href="./manifest.json">
-		<title>Smart-Home</title>
 		<style>
 			body {
 				background-color: #f8f9fa;
 			}
 
+			@media screen and (prefers-color-scheme: dark) {
+				body {
+					background-color: #2c2c2e;
+				}
+			}
+
 			#loading {
 				position: absolute;
 				left: 0;

diff --git a/www/sw.js b/www/sw.js
@@ -50,7 +50,7 @@ let preCache = [
 	'./icons/weather.png'
 ];
 
-const CACHE = 'cache-v4';
+const CACHE = 'cache-v5';
 
 self.addEventListener('install', function (evt) {
 	self.skipWaiting();