Make theme follow system theme

3 files changed, 19 insertions, 2 deletions

diff --git a/src/components/Forecast/ForecastDrawer.svelte b/src/components/Forecast/ForecastDrawer.svelte
index 0fdab29..16ed509 100644
--- a/src/components/Forecast/ForecastDrawer.svelte
+++ b/src/components/Forecast/ForecastDrawer.svelte
@@ -19,7 +19,7 @@
         height: 100%;
         overflow: hidden;
         align-self: stretch;
-        box-shadow: 0px -6px 7px 0px black;
+        box-shadow: var(--elevation-1-shadow);
     }
 
     @media (min-width: 640px), (min-height: 720px) {
diff --git a/src/stores.ts b/src/stores.ts
index 16dc03e..468efca 100644
--- a/src/stores.ts
+++ b/src/stores.ts
@@ -1,6 +1,21 @@
-import { writable, readable } from 'svelte/store';
+import { writable, readable, get } from 'svelte/store';
 
+// Choose dark or light mode.
 export const theme = writable('light');
+function check_system_theme() {
+    if (typeof window === "undefined") { return; }
+    let system_theme = window.matchMedia("(prefers-color-scheme:dark)").matches ? "dark" : "light";
+    if (system_theme != get(theme)) { theme.set(system_theme); }
+}
+setInterval(check_system_theme, 1000);
+theme.subscribe(value => {
+    if (typeof window === "undefined") { return; }
+    if (value == "dark") {
+        window.document.body.classList.add("dark");
+    } else {
+        window.document.body.classList.remove("dark");
+    }
+});
 
 /*
  * the different data sources are
diff --git a/static/theme.css b/static/theme.css
index e00cd60..7e0d6fc 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -2,6 +2,7 @@ body {
     --surface: rgb(247, 250, 252);
     --surface: #f7fafc;
     --on-surface: #1a202c;
+    --elevation-1-shadow: 0px -6px 7px 0px black;
 
     --divider: #e2e8f0;
     --gradient-1: linear-gradient(90deg, #84fab0, #8fd3f4 51%, #84fab0) 100% / 200%;
@@ -14,6 +15,7 @@ body {
 body.dark {
     --surface: #161616;
     --on-surface: #a5a5a5;
+    --elevation-1-shadow: none;
 
     --divider: #363636;
     --gradient-1: linear-gradient(90deg, #0c5f2b, #0a2531 51%, #1e6439) 100% / 200%;