diff --git a/static/app.js b/static/app.js
index f35515d..8494fa3 100644
--- a/static/app.js
+++ b/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", {
diff --git a/static/index.html b/static/index.html
index c6ab2ed..8931189 100644
--- a/static/index.html
+++ b/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>
diff --git a/static/style.css b/static/style.css
index 25133f8..9481db9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -22,22 +22,24 @@
     --popup-heading: #222;
 }
 
-html.dark {
-    --bg: #1e1e2e;
-    --text: #cdd6f4;
-    --text-muted: #a6adc8;
-    --text-faint: #7f849c;
-    --text-fainter: #6c7086;
-    --border: #45475a;
-    --border-light: #313244;
-    --border-lighter: #2a2a3c;
-    --hover-bg: #313244;
-    --shadow: rgba(0, 0, 0, 0.5);
-    --shadow-light: rgba(0, 0, 0, 0.3);
-    --input-bg: #313244;
-    --clear-btn-bg: #45475a;
-    --clear-btn-hover: #585b70;
-    --popup-heading: #cdd6f4;
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #1e1e2e;
+        --text: #cdd6f4;
+        --text-muted: #a6adc8;
+        --text-faint: #7f849c;
+        --text-fainter: #6c7086;
+        --border: #45475a;
+        --border-light: #313244;
+        --border-lighter: #2a2a3c;
+        --hover-bg: #313244;
+        --shadow: rgba(0, 0, 0, 0.5);
+        --shadow-light: rgba(0, 0, 0, 0.3);
+        --input-bg: #313244;
+        --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 {
-    filter: brightness(0.7) contrast(1.1) saturate(0.8);
-}
+@media (prefers-color-scheme: dark) {
+    .leaflet-tile-pane {
+        filter: brightness(0.7) contrast(1.1) saturate(0.8);
+    }
 
-html.dark .leaflet-popup-content-wrapper,
-html.dark .leaflet-popup-tip {
-    background: var(--bg);
-    color: var(--text);
-}
+    .leaflet-popup-content-wrapper,
+    .leaflet-popup-tip {
+        background: var(--bg);
+        color: var(--text);
+    }
 
-html.dark .leaflet-popup-content-wrapper {
-    box-shadow: 0 3px 14px var(--shadow);
-}
+    .leaflet-popup-content-wrapper {
+        box-shadow: 0 3px 14px var(--shadow);
+    }
 
-html.dark .leaflet-control-zoom a {
-    background: var(--bg);
-    color: var(--text);
-    border-color: var(--border);
-}
+    .leaflet-control-zoom a {
+        background: var(--bg);
+        color: var(--text);
+        border-color: var(--border);
+    }
 
-html.dark .leaflet-control-zoom a:hover {
-    background: var(--hover-bg);
-}
+    .leaflet-control-zoom a:hover {
+        background: var(--hover-bg);
+    }
 
-html.dark .leaflet-control-attribution {
-    background: rgba(30, 30, 46, 0.8);
-    color: var(--text-fainter);
-}
+    .leaflet-control-attribution {
+        background: rgba(30, 30, 46, 0.8);
+        color: var(--text-fainter);
+    }
 
-html.dark .leaflet-control-attribution a {
-    color: var(--text-faint);
+    .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 {
-    color: #64b5f6;
-}
+@media (prefers-color-scheme: dark) {
+    .band-2m {
+        color: #64b5f6;
+    }
 
-html.dark .band-70cm {
-    color: #ef5350;
+    .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 {
-    background: #2e7d32;
-    color: #a5d6a7;
+@media (prefers-color-scheme: dark) {
+    #route-btn:disabled {
+        background: #2e7d32;
+        color: #a5d6a7;
+    }
 }
 
 #clear-btn {