Fix theme toggle functionality with Dark Matter and Light Matter labels

- Updated theme toggle to properly switch between CartoDB tiles
- Replaced unreliable layer detection with direct tile layer management
- Updated button labels to "Dark Matter" and "Light Matter" as requested
- Fixed theme detection for particle color adaptation
- Improved tile layer switching with proper cleanup and replacement

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

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

app.py

@@ -404,7 +404,7 @@ def create_wind_map(region="global"):
     # Add light theme option (but don't make it active by default)
     folium.TileLayer(
         tiles="CartoDB positron",
-        name="Light Theme",
+        name="Light Matter",
         control=False  # We'll control this with our custom button
     ).add_to(m)
     
@@ -453,16 +453,15 @@ def create_wind_map(region="global"):
             // Check if we're on light theme by looking at current tile layer
             var currentTileLayer = 'dark'; // default to dark
             map.eachLayer(function(layer) {{
-                if (layer.options && layer.options.tiles) {{
-                    if (layer.options.tiles.includes('positron') || layer.options.tiles.includes('light')) {{
+                if (layer.options && layer.options.attribution) {{
+                    if (layer.options.attribution.includes('Light Matter') || 
+                        layer.options.attribution.includes('light_all')) {{
                         currentTileLayer = 'light';
                     }}
                 }}
-                // Also check the layer name/attribution
-                if (layer.options && layer.options.name === 'Light Theme') {{
-                    if (map.hasLayer(layer)) {{
-                        currentTileLayer = 'light';
-                    }}
+                // Also check tile URL patterns
+                if (layer._url && layer._url.includes('light_all')) {{
+                    currentTileLayer = 'light';
                 }}
             }});
             
@@ -725,7 +724,7 @@ def create_wind_map(region="global"):
             
             // Add theme toggle button
             var buttonTheme = L.DomUtil.create('button', 'theme-toggle', windControlDiv);
-            buttonTheme.innerHTML = '🌙 Dark Theme';
+            buttonTheme.innerHTML = '🌙 Dark Matter';
             buttonTheme.style.display = 'block';
             buttonTheme.style.width = '120px';
             buttonTheme.style.margin = '2px 0';
@@ -752,53 +751,50 @@ def create_wind_map(region="global"):
             
             // Theme toggle functionality
             var isLightTheme = false;  // Start with dark theme
-            var darkTileLayer = null;
-            var lightTileLayer = null;
+            var currentTileLayer = null;
             
-            // Find the tile layers
+            // Find and store the current base layer
             map.eachLayer(function(layer) {{
-                if (layer.options && layer.options.tiles) {{
-                    if (layer.options.tiles.includes('dark_matter')) {{
-                        darkTileLayer = layer;
-                        console.log("🌙 Found dark tile layer");
-                    }} else if (layer.options.tiles.includes('positron')) {{
-                        lightTileLayer = layer;
-                        console.log("☀️ Found light tile layer");
-                        // Remove light layer by default (start with dark)
-                        map.removeLayer(layer);
-                    }}
+                if (layer.options && layer.options.attribution && layer.options.attribution.includes('CartoDB')) {{
+                    currentTileLayer = layer;
                 }}
             }});
             
             L.DomEvent.on(buttonTheme, 'click', function() {{
                 isLightTheme = !isLightTheme;
                 
+                // Remove current tile layer
+                if (currentTileLayer) {{
+                    map.removeLayer(currentTileLayer);
+                }}
+                
                 if (isLightTheme) {{
-                    // Switch to light theme
-                    console.log("🌞 Switching to LIGHT theme...");
-                    if (darkTileLayer && map.hasLayer(darkTileLayer)) {{
-                        map.removeLayer(darkTileLayer);
-                    }}
-                    if (lightTileLayer) {{
-                        map.addLayer(lightTileLayer);
-                    }}
-                    buttonTheme.innerHTML = '☀️ Light Theme';
+                    // Switch to light matter theme
+                    console.log("🌞 Switching to LIGHT MATTER theme...");
+                    currentTileLayer = L.tileLayer('https://{{s}}.basemaps.cartocdn.com/light_all/{{z}}/{{x}}/{{y}}{{r}}.png', {{
+                        attribution: '© CartoDB Light Matter',
+                        subdomains: 'abcd',
+                        maxZoom: 19
+                    }});
+                    currentTileLayer.addTo(map);
+                    buttonTheme.innerHTML = '☀️ Light Matter';
                     buttonTheme.style.background = '#f59e0b';
                 }} else {{
-                    // Switch to dark theme
-                    console.log("🌙 Switching to DARK theme...");
-                    if (lightTileLayer && map.hasLayer(lightTileLayer)) {{
-                        map.removeLayer(lightTileLayer);
-                    }}
-                    if (darkTileLayer) {{
-                        map.addLayer(darkTileLayer);
-                    }}
-                    buttonTheme.innerHTML = '🌙 Dark Theme';
+                    // Switch to dark matter theme
+                    console.log("🌙 Switching to DARK MATTER theme...");
+                    currentTileLayer = L.tileLayer('https://{{s}}.basemaps.cartocdn.com/dark_all/{{z}}/{{x}}/{{y}}{{r}}.png', {{
+                        attribution: '© CartoDB Dark Matter',
+                        subdomains: 'abcd',
+                        maxZoom: 19
+                    }});
+                    currentTileLayer.addTo(map);
+                    buttonTheme.innerHTML = '🌙 Dark Matter';
                     buttonTheme.style.background = '#374151';
                 }}
                 
                 // Trigger particle color update after theme change
                 setTimeout(reloadParticlesWithTheme, 200);
+                console.log("✅ Theme switched successfully!");
             }});
             
             // Add controls to map