From c5356b611a2bf2edf9a2e25d0aed1050ae8011ed Mon Sep 17 00:00:00 2001
From: Deco Vander <deco@deco.sh>
Date: Fri, 4 Jul 2025 16:36:41 -0400
Subject: [PATCH] Fix map display and auto theme detection

- Add missing #map CSS styles to fix map container display
- Fix auto theme detection by implementing proper system preference detection
- Update applyTheme function in all JS files to handle 'auto' theme correctly
- System theme changes are now properly detected and applied when in auto mode
---
 public/admin.js      | 8 +++++++-
 public/app-mapbox.js | 8 +++++++-
 public/privacy.html  | 8 +++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/public/admin.js b/public/admin.js
index a616e0d..3c30a29 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -705,7 +705,13 @@ function initializeTheme() {
 }
 
 function applyTheme(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
+    if (theme === 'auto') {
+        // Detect system preference and apply appropriate theme
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+    } else {
+        document.documentElement.setAttribute('data-theme', theme);
+    }
 }
 
 function updateThemeIcon(theme, iconElement) {
diff --git a/public/app-mapbox.js b/public/app-mapbox.js
index 55d74d6..bea752e 100644
--- a/public/app-mapbox.js
+++ b/public/app-mapbox.js
@@ -617,7 +617,13 @@ function initializeTheme() {
 }
 
 function applyTheme(theme) {
-    document.documentElement.setAttribute('data-theme', theme);
+    if (theme === 'auto') {
+        // Detect system preference and apply appropriate theme
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+    } else {
+        document.documentElement.setAttribute('data-theme', theme);
+    }
 }
 
 function updateThemeIcon(theme, iconElement) {
diff --git a/public/privacy.html b/public/privacy.html
index 6b56e18..b9397b1 100644
--- a/public/privacy.html
+++ b/public/privacy.html
@@ -165,7 +165,13 @@
         }
         
         function applyTheme(theme) {
-            document.documentElement.setAttribute('data-theme', theme);
+            if (theme === 'auto') {
+                // Detect system preference and apply appropriate theme
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+            } else {
+                document.documentElement.setAttribute('data-theme', theme);
+            }
         }
         
         function updateThemeIcon(theme, iconElement) {