Merge main: Resolve theme conflicts and integrate latest improvements

- Accept main branch's superior inline theme detection approach
- Keep architecture improvements from feature branch
- Maintain all new models/services layer functionality
- Preserve frontend refactoring with MapBase class

🤖 Generated with [Claude Code](https://claude.ai/code)

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

README.md

@@ -21,7 +21,7 @@ A community-driven web application for tracking winter road conditions and icy h
 
 1. **Clone the repository:**
    ```bash
-   git clone git@github.com:deco/ice.git
+   git clone git@git.deco.sh:deco/ice.git
    cd ice
    ```
 
@@ -89,7 +89,7 @@ PORT=3000
 
 2. **Deploy your application:**
    ```bash
-   git clone git@github.com:deco/ice.git /opt/ice
+   git clone git@git.deco.sh:deco/ice.git /opt/ice
    cd /opt/ice
    npm install  # This automatically builds CSS via postinstall
    ```
@@ -149,7 +149,7 @@ MIT License - see LICENSE file for details
 ## Support
 
 This is a community safety tool. For issues or questions:
-- Create a GitHub issue
+- Create an issue on our git repository
 - Check existing documentation
 - Review security guidelines
 

public/admin.html

@@ -11,7 +11,12 @@
         // Apply theme immediately to prevent flash
         (function() {
             const savedTheme = localStorage.getItem('theme') || 'auto';
-            document.documentElement.setAttribute('data-theme', savedTheme);
+            if (savedTheme === 'auto') {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+            } else {
+                document.documentElement.setAttribute('data-theme', savedTheme);
+            }
         })();
     </script>
 </head>
@@ -162,6 +167,8 @@
         </div>
     </footer>
 
+    <!-- Load shared theme utility -->
+    <script src="theme-utils.js"></script>
     <script src="utils.js"></script>
     <script src="admin.js"></script>
 </body>

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) {

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) {

public/index.html

@@ -12,7 +12,12 @@
         // Apply theme immediately to prevent flash
         (function() {
             const savedTheme = localStorage.getItem('theme') || 'auto';
-            document.documentElement.setAttribute('data-theme', savedTheme);
+            if (savedTheme === 'auto') {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+            } else {
+                document.documentElement.setAttribute('data-theme', savedTheme);
+            }
         })();
     </script>
 </head>
@@ -116,6 +121,8 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
     </div>
 
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <!-- Load shared theme utility -->
+    <script src="theme-utils.js"></script>
     <script src="utils.js"></script>
     <script src="app-mapbox.js"></script>
 </body>

public/privacy.html

@@ -11,7 +11,12 @@
         // Apply theme immediately to prevent flash
         (function() {
             const savedTheme = localStorage.getItem('theme') || 'auto';
-            document.documentElement.setAttribute('data-theme', savedTheme);
+            if (savedTheme === 'auto') {
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+            } else {
+                document.documentElement.setAttribute('data-theme', savedTheme);
+            }
         })();
     </script>
 </head>
@@ -99,8 +104,8 @@
                 <h2>Contact Information</h2>
                 <p>Questions about this privacy policy or your data?</p>
                 <ul>
-                    <li>Create an issue on our <a href="https://github.com/deco/great-lakes-ice-report" target="_blank">GitHub repository</a></li>
+                    <li>Create an issue on our <a href="https://git.deco.sh/deco/ice" target="_blank" rel="noopener noreferrer">git repository</a></li>
-                    <li>Review our <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank">recommended rights resources</a></li>
+                    <li>Review our <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer">recommended rights resources</a></li>
                     <li>This is a community tool - please use responsibly</li>
                 </ul>
             </div>
@@ -117,78 +122,9 @@
         </div>
     </footer>
     
+    <!-- Load shared theme utility -->
+    <script src="theme-utils.js"></script>
     <script>
-        // Theme toggle functionality (shared with main page)
-        function initializeTheme() {
-            const themeToggle = document.getElementById('theme-toggle');
-            const themeIcon = document.querySelector('.theme-icon');
-            
-            if (!themeToggle || !themeIcon) {
-                console.warn('Theme toggle elements not found');
-                return;
-            }
-            
-            // Check for saved theme preference or default to auto (follows system)
-            const savedTheme = localStorage.getItem('theme') || 'auto';
-            applyTheme(savedTheme);
-            
-            // Update icon based on current theme
-            updateThemeIcon(savedTheme, themeIcon);
-            
-            // Add click listener for cycling through themes
-            themeToggle.addEventListener('click', () => {
-                const currentTheme = localStorage.getItem('theme') || 'auto';
-                let newTheme;
-                
-                // Cycle: auto → light → dark → auto
-                switch(currentTheme) {
-                    case 'auto':
-                        newTheme = 'light';
-                        break;
-                    case 'light':
-                        newTheme = 'dark';
-                        break;
-                    case 'dark':
-                        newTheme = 'auto';
-                        break;
-                    default:
-                        newTheme = 'auto';
-                }
-                
-                localStorage.setItem('theme', newTheme);
-                applyTheme(newTheme);
-                updateThemeIcon(newTheme, themeIcon);
-                
-                console.log(`Theme switched to: ${newTheme}`);
-            });
-            
-            // Listen for system theme changes when in auto mode
-            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-                const currentTheme = localStorage.getItem('theme') || 'auto';
-                if (currentTheme === 'auto') {
-                    applyTheme('auto');
-                }
-            });
-        }
-        
-        function applyTheme(theme) {
-            document.documentElement.setAttribute('data-theme', theme);
-        }
-        
-        function updateThemeIcon(theme, iconElement) {
-            switch(theme) {
-                case 'auto':
-                    iconElement.textContent = '🌍'; // Globe (auto)
-                    break;
-                case 'light':
-                    iconElement.textContent = '☀️'; // Sun (light)
-                    break;
-                case 'dark':
-                    iconElement.textContent = '🌙'; // Moon (dark)
-                    break;
-            }
-        }
-        
         // Initialize theme when page loads
         document.addEventListener('DOMContentLoaded', initializeTheme);
     </script>

scripts/deploy.sh

@@ -104,7 +104,7 @@ echo ""
 echo "🚀 Next steps to deploy Great Lakes Ice Report:"
 echo ""
 echo "1. Clone your repository:"
-echo "   git clone git@github.com:deco/great-lakes-ice-report.git /opt/great-lakes-ice-report"
+echo "   git clone git@git.deco.sh:deco/ice.git /opt/great-lakes-ice-report"
 echo ""
 echo "2. Set up the application:"
 echo "   cd /opt/great-lakes-ice-report"

src/scss/main.scss

@@ -160,17 +160,7 @@ button {
 
 // Theme toggle styles (common across pages)
 .theme-toggle {
-  @include button($bg-color: transparent);
+  @include theme-toggle-styles;
-  border: 2px solid var(--border-color);
-  border-radius: $border-radius-full;
-  width: 40px;
-  height: 40px;
-  @include flex-center;
-  
-  &:hover {
-    background-color: var(--table-hover);
-    transform: none;
-  }
 }
 
 // Utility classes

src/scss/mixins.scss

@@ -122,6 +122,23 @@
   color: $text-color;
 }
 
+// Theme Toggle Mixin (consolidates duplicated theme toggle styles)
+@mixin theme-toggle-styles($width: 40px, $height: 40px) {
+  @include button($bg-color: transparent);
+  border: 2px solid var(--border-color);
+  border-radius: $border-radius-full;
+  width: $width;
+  height: $height;
+  @include flex-center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px var(--shadow);
+  
+  &:hover {
+    background-color: var(--table-hover);
+    transform: none;
+  }
+}
+
 // Back-link button mixin (shared component)
 @mixin back-link-styles {
   display: inline-block;

src/scss/pages/_admin.scss

@@ -58,13 +58,9 @@
 }
 
 .theme-toggle-admin {
+  @include theme-toggle-styles;
   background: var(--card-bg) !important;
   color: var(--text-color) !important;
-  border: 2px solid var(--border-color) !important;
-  width: 40px;
-  height: 40px;
-  border-radius: $border-radius-full !important;
-  @include flex-center;
   padding: 0 !important;
 }
 

src/scss/pages/_index.scss

@@ -58,7 +58,8 @@
     }
   }
   
-  .theme-toggle {
+.theme-toggle {
+    @include theme-toggle-styles;
     align-self: center;
   }
 }

src/scss/pages/_privacy.scss

@@ -23,19 +23,14 @@
   }
   
   &__theme-toggle {
+    @include theme-toggle-styles;
     position: absolute;
     top: 0;
     right: 0;
-    background: var(--card-bg);
-    border: 2px solid var(--border-color);
-    border-radius: 50%;
     width: 50px;
     height: 50px;
-    @include flex-center;
     cursor: pointer;
-    transition: all 0.3s ease;
+
-    box-shadow: 0 2px 4px var(--shadow);
-    
     .theme-icon {
       font-size: $font-size-lg;
     }