feat: follow system color scheme by default

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;
+        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);