added dark mode media query

2 files changed, 13 insertions, 0 deletions

diff --git a/app.js b/app.js
index 333c354..ef71b3b 100644
--- a/app.js
+++ b/app.js
@@ -16,6 +16,7 @@ const initInput = function(styleVariable=null) {
 		document.documentElement.style.setProperty(styleVariable, initValue);
 	} else {
 		initValue = getComputedStyle(document.body).getPropertyValue(styleVariable);
+		initValue = Number(initValue);
 	};
 
 	const inputObject = document.getElementById(styleVariable);
diff --git a/style.css b/style.css
index fad5100..9ccd723 100644
--- a/style.css
+++ b/style.css
@@ -42,6 +42,18 @@
 	--contrast-color: hsl(var(--contrast-hue), 100%, var(--contrast-lightness));				
 }
 
+@media (prefers-color-scheme: dark) {
+	:root {
+		--dark-theme-check: 1;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--dark-theme-check: 0;
+	}
+}
+
 ::selection {
 	background-color: var(--contrast-color);
 	color: hsl(0, 0%, var(--background-lightness));