fix: Resolve light/dark theme issues across dashboards and settings

- Add missing setThemePreference() and setAnimationsEnabled() functions
  to settings-manager.js; sync theme/animations dropdowns in _updateUI
- Fix base.html toggleTheme() saving to wrong localStorage key ('theme'
  instead of 'intercept-theme'), causing theme not to persist in ADS-B
  and AIS dashboards; also sync button icon and persist to server
- Add [data-theme="light"] CSS variable overrides to adsb_dashboard.css
  and ais_dashboard.css so the dashboards respond to light theme
- Fix GPS sky view canvas (gps.js) to read grid/label colours from CSS
  variables instead of hardcoded dark hex values; add MutationObserver
  to redraw immediately on theme change
- Fix satellite_dashboard.html polar plot functions to read background,
  accent and text colours from CSS variables

Closes #139

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

static/js/core/settings-manager.js

@@ -323,6 +323,18 @@ const Settings = {
         if (customRow) {
             customRow.style.display = this.get('offline.tile_provider') === 'custom' ? 'block' : 'none';
         }
+
+        // Theme select
+        const themeSelect = document.getElementById('themeSelect');
+        if (themeSelect) {
+            themeSelect.value = localStorage.getItem('intercept-theme') || 'dark';
+        }
+
+        // Animations toggle
+        const animationsEnabled = document.getElementById('animationsEnabled');
+        if (animationsEnabled) {
+            animationsEnabled.checked = localStorage.getItem('intercept-animations') !== 'off';
+        }
     },
 
     /**
@@ -983,3 +995,34 @@ function toggleApiKeyVisibility() {
     if (!input) return;
     input.type = input.type === 'password' ? 'text' : 'password';
 }
+
+/**
+ * Set theme preference from the Display settings tab
+ */
+function setThemePreference(value) {
+    document.documentElement.setAttribute('data-theme', value);
+    localStorage.setItem('intercept-theme', value);
+
+    const btn = document.getElementById('themeToggle');
+    if (btn) {
+        btn.textContent = value === 'light' ? '🌙' : '☀️';
+    }
+
+    fetch('/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ theme: value })
+    }).catch(() => {});
+}
+
+/**
+ * Set animations preference from the Display settings tab
+ */
+function setAnimationsEnabled(enabled) {
+    if (enabled) {
+        document.documentElement.removeAttribute('data-animations');
+    } else {
+        document.documentElement.setAttribute('data-animations', 'off');
+    }
+    localStorage.setItem('intercept-animations', enabled ? 'on' : 'off');
+}

static/js/modes/gps.js

@@ -23,6 +23,16 @@ const GPS = (function() {
     function init() {
         drawEmptySkyView();
         connect();
+
+        // Redraw sky view when theme changes
+        const observer = new MutationObserver(() => {
+            if (lastSky) {
+                drawSkyView(lastSky.satellites || []);
+            } else {
+                drawEmptySkyView();
+            }
+        });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
     }
 
     function connect() {
@@ -316,13 +326,18 @@ const GPS = (function() {
 
         ctx.clearRect(0, 0, w, h);
 
+        const cs = getComputedStyle(document.documentElement);
+        const bgColor = cs.getPropertyValue('--bg-card').trim() || '#0d1117';
+        const gridColor = cs.getPropertyValue('--border-color').trim() || '#2a3040';
+        const dimColor = cs.getPropertyValue('--text-dim').trim() || '#555';
+        const secondaryColor = cs.getPropertyValue('--text-secondary').trim() || '#888';
+
         // Background
-        const bgStyle = getComputedStyle(document.documentElement).getPropertyValue('--bg-card').trim();
-        ctx.fillStyle = bgStyle || '#0d1117';
+        ctx.fillStyle = bgColor;
         ctx.fillRect(0, 0, w, h);
 
         // Elevation rings (0, 30, 60, 90)
-        ctx.strokeStyle = '#2a3040';
+        ctx.strokeStyle = gridColor;
         ctx.lineWidth = 0.5;
         [90, 60, 30].forEach(el => {
             const gr = r * (1 - el / 90);
@@ -330,7 +345,7 @@ const GPS = (function() {
             ctx.arc(cx, cy, gr, 0, Math.PI * 2);
             ctx.stroke();
             // Label
-            ctx.fillStyle = '#555';
+            ctx.fillStyle = dimColor;
             ctx.font = '9px Roboto Condensed, monospace';
             ctx.textAlign = 'left';
             ctx.textBaseline = 'middle';
@@ -338,14 +353,14 @@ const GPS = (function() {
         });
 
         // Horizon circle
-        ctx.strokeStyle = '#3a4050';
+        ctx.strokeStyle = gridColor;
         ctx.lineWidth = 1;
         ctx.beginPath();
         ctx.arc(cx, cy, r, 0, Math.PI * 2);
         ctx.stroke();
 
         // Cardinal directions
-        ctx.fillStyle = '#888';
+        ctx.fillStyle = secondaryColor;
         ctx.font = 'bold 11px Roboto Condensed, monospace';
         ctx.textAlign = 'center';
         ctx.textBaseline = 'middle';
@@ -355,7 +370,7 @@ const GPS = (function() {
         ctx.fillText('W', cx - r - 12, cy);
 
         // Crosshairs
-        ctx.strokeStyle = '#2a3040';
+        ctx.strokeStyle = gridColor;
         ctx.lineWidth = 0.5;
         ctx.beginPath();
         ctx.moveTo(cx, cy - r);
@@ -365,7 +380,7 @@ const GPS = (function() {
         ctx.stroke();
 
         // Zenith dot
-        ctx.fillStyle = '#333';
+        ctx.fillStyle = dimColor;
         ctx.beginPath();
         ctx.arc(cx, cy, 2, 0, Math.PI * 2);
         ctx.fill();