Remove manual dark/light toggle and just use browser pefs

static/app.js

@@ -1,27 +1,6 @@
 (function () {
     "use strict";
 
-    // === Theme ===
-    var themeToggle = document.getElementById("theme-toggle");
-
-    function applyTheme(dark) {
-        document.documentElement.classList.toggle("dark", dark);
-        themeToggle.textContent = dark ? "\u2600" : "\u263E";
-        themeToggle.title = dark ? "Switch to light mode" : "Switch to dark mode";
-    }
-
-    var savedTheme = localStorage.getItem("theme");
-    var prefersDark = savedTheme === "dark" ||
-        (savedTheme === null && window.matchMedia("(prefers-color-scheme: dark)").matches);
-    applyTheme(prefersDark);
-
-    themeToggle.addEventListener("click", function () {
-        var isDark = document.documentElement.classList.toggle("dark");
-        localStorage.setItem("theme", isDark ? "dark" : "light");
-        themeToggle.textContent = isDark ? "\u2600" : "\u263E";
-        themeToggle.title = isDark ? "Switch to light mode" : "Switch to dark mode";
-    });
-
     // === Map Setup ===
     var map = L.map("map").setView([52.37, 9.73], 6);
     L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {

static/index.html

@@ -14,7 +14,6 @@
             <label class="band-label band-2m"><input type="checkbox" id="band-2m" checked> 2m</label>
             <label class="band-label band-70cm"><input type="checkbox" id="band-70cm" checked> 70cm</label>
             <span id="count" class="count"></span>
-            <button id="theme-toggle" class="theme-toggle" title="Toggle dark mode"></button>
         </div>
         <div class="controls-row network-row">
             <label class="net-label net-bm"><input type="checkbox" id="net-bm" checked> BM</label>

static/style.css

@@ -22,7 +22,8 @@
     --popup-heading: #222;
 }
 
-html.dark {
+@media (prefers-color-scheme: dark) {
+    :root {
         --bg: #1e1e2e;
         --text: #cdd6f4;
         --text-muted: #a6adc8;
@@ -38,6 +39,7 @@ html.dark {
         --clear-btn-bg: #45475a;
         --clear-btn-hover: #585b70;
         --popup-heading: #cdd6f4;
+    }
 }
 
 html, body {
@@ -51,37 +53,39 @@ html, body {
     height: 100%;
 }
 
-html.dark .leaflet-tile-pane {
+@media (prefers-color-scheme: dark) {
+    .leaflet-tile-pane {
         filter: brightness(0.7) contrast(1.1) saturate(0.8);
-}
+    }
 
-html.dark .leaflet-popup-content-wrapper,
+    .leaflet-popup-content-wrapper,
-html.dark .leaflet-popup-tip {
+    .leaflet-popup-tip {
         background: var(--bg);
         color: var(--text);
-}
+    }
 
-html.dark .leaflet-popup-content-wrapper {
+    .leaflet-popup-content-wrapper {
         box-shadow: 0 3px 14px var(--shadow);
-}
+    }
 
-html.dark .leaflet-control-zoom a {
+    .leaflet-control-zoom a {
         background: var(--bg);
         color: var(--text);
         border-color: var(--border);
-}
+    }
 
-html.dark .leaflet-control-zoom a:hover {
+    .leaflet-control-zoom a:hover {
         background: var(--hover-bg);
-}
+    }
 
-html.dark .leaflet-control-attribution {
+    .leaflet-control-attribution {
         background: rgba(30, 30, 46, 0.8);
         color: var(--text-fainter);
-}
+    }
 
-html.dark .leaflet-control-attribution a {
+    .leaflet-control-attribution a {
         color: var(--text-faint);
+    }
 }
 
 #controls {
@@ -121,12 +125,14 @@ html.dark .leaflet-control-attribution a {
     color: #D32F2F;
 }
 
-html.dark .band-2m {
+@media (prefers-color-scheme: dark) {
+    .band-2m {
         color: #64b5f6;
-}
+    }
 
-html.dark .band-70cm {
+    .band-70cm {
         color: #ef5350;
+    }
 }
 
 #controls .controls-row:first-child input[type="checkbox"] {
@@ -202,20 +208,6 @@ html.dark .band-70cm {
     white-space: nowrap;
 }
 
-.theme-toggle {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 16px;
-    padding: 0;
-    line-height: 1;
-    opacity: 0.6;
-}
-
-.theme-toggle:hover {
-    opacity: 1;
-}
-
 .route-row {
     margin-top: 6px;
 }
@@ -311,9 +303,11 @@ html.dark .band-70cm {
     cursor: default;
 }
 
-html.dark #route-btn:disabled {
+@media (prefers-color-scheme: dark) {
+    #route-btn:disabled {
         background: #2e7d32;
         color: #a5d6a7;
+    }
 }
 
 #clear-btn {