From 1d044683f4b32d10d57ecde87b5c1fbe3dfb93b9 Mon Sep 17 00:00:00 2001
From: Arne Baeumler <arne@br0tkasten.de>
Date: Sat, 13 Jun 2026 08:04:11 +0200
Subject: [PATCH] feat: follow system color scheme by default

---
 src/server/request-handler.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/server/request-handler.ts b/src/server/request-handler.ts
index 7abcd65..8af3010 100644
--- a/src/server/request-handler.ts
+++ b/src/server/request-handler.ts
@@ -1363,10 +1363,12 @@ function htmlPage(): string {
         return URL.createObjectURL(thumbnailBlob);
       }
 
-      function setTheme(theme) {
+      function setTheme(theme, persist = true) {
         const resolvedTheme = theme === "light" ? "light" : "dark";
         document.body.dataset.theme = resolvedTheme;
-        localStorage.setItem("theme", resolvedTheme);
+        if (persist) {
+          localStorage.setItem("theme", resolvedTheme);
+        }
         setMapTheme(resolvedTheme);
 
         if (resolvedTheme === "dark") {
@@ -1479,11 +1481,18 @@ function htmlPage(): string {
         }
       }
 
+      const themeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       const storedTheme = localStorage.getItem("theme");
-      setTheme(storedTheme === "dark" ? "dark" : "light");
+      const initialTheme = storedTheme === "dark" || (storedTheme !== "light" && themeMediaQuery.matches) ? "dark" : "light";
+      setTheme(initialTheme, false);
       themeToggle.addEventListener("click", () => {
         setTheme(document.body.dataset.theme === "dark" ? "light" : "dark");
       });
+      if (storedTheme === null) {
+        themeMediaQuery.addEventListener("change", (event) => {
+          setTheme(event.matches ? "dark" : "light", false);
+        });
+      }
       setRouteVisible(routeVisible);
       routeToggle.addEventListener("click", () => {
         setRouteVisible(!routeVisible);