ok

app.py

@@ -574,6 +574,32 @@ def create_wind_map(region="global"):
         }}
         console.log("✅ STEP 4: Leaflet-Velocity plugin loaded");
         
+        // Function to get theme-appropriate color scale
+        function getColorScale() {{
+            // Check if we're on light theme by looking at current tile layer
+            var currentTileLayer = null;
+            map.eachLayer(function(layer) {{
+                if (layer.options && layer.options.tiles && layer.options.tiles.includes('positron')) {{
+                    currentTileLayer = 'light';
+                }}
+            }});
+            
+            // Light blue colors for dark theme, dark blue for light theme
+            if (currentTileLayer === 'light') {{
+                // Dark blue colors for light theme
+                return [
+                    "#1e3a8a", "#1e40af", "#1d4ed8", "#2563eb", "#3b82f6",
+                    "#60a5fa", "#93c5fd", "#dbeafe", "#eff6ff", "#f0f9ff", "#ffffff"
+                ];
+            }} else {{
+                // Light blue colors for dark theme
+                return [
+                    "#60a5fa", "#93c5fd", "#dbeafe", "#eff6ff", "#f0f9ff", 
+                    "#ffffff", "#f8fafc", "#f1f5f9", "#e2e8f0", "#cbd5e1", "#94a3b8"
+                ];
+            }}
+        }}
+        
         // Create initial velocity layer with optimized settings for real data
         console.log("🎯 STEP 5: Creating real ECMWF wind visualization...");
         currentVelocityLayer = L.velocityLayer({{
@@ -593,20 +619,7 @@ def create_wind_map(region="global"):
             maxVelocity: 50,               // Capture all wind speeds
             particleMultiplier: 0.006,     // Reduced density for clarity
             lineWidth: 0.3,                // Thinner lines
-            colorScale: [
-                // Dark blue color scale for better visibility on light backgrounds
-                "#1e3a8a",   // Very slow winds - dark blue
-                "#1e40af",   // Slow winds - dark blue
-                "#1d4ed8",   // Light winds - blue
-                "#2563eb",   // Moderate winds - bright blue
-                "#3b82f6",   // Strong winds - blue
-                "#60a5fa",   // Fast winds - light blue
-                "#93c5fd",   // Very fast winds - lighter blue
-                "#dbeafe",   // High winds - very light blue
-                "#eff6ff",   // Very high winds - pale blue
-                "#f0f9ff",   // Extreme winds - very pale blue
-                "#ffffff"    // Hurricane force - white
-            ],
+            colorScale: getColorScale(),   // Theme-appropriate colors
             frameRate: 30,                 // Smooth animation
             particleAge: 120,              // Shorter particle life for slower winds
             particleReduction: 0.5,        // Less reduction = more particles
@@ -655,10 +668,7 @@ def create_wind_map(region="global"):
                     maxVelocity: 50,
                     particleMultiplier: 0.006,
                     lineWidth: 0.3,
-                    colorScale: [
-                        "#1e3a8a", "#1e40af", "#1d4ed8", "#2563eb", "#3b82f6",
-                        "#60a5fa", "#93c5fd", "#dbeafe", "#eff6ff", "#f0f9ff", "#ffffff"
-                    ],
+                    colorScale: getColorScale(),
                     frameRate: 30,
                     particleAge: 120,
                     particleReduction: 0.5,
@@ -677,10 +687,14 @@ def create_wind_map(region="global"):
             }}
         }}
         
-        // Event handlers for map interaction
+        // Event handlers for map interaction and theme changes
         map.on('moveend', immediateParticleReload);
         map.on('zoomend', immediateParticleReload);
         map.on('dragend', immediateParticleReload);
+        map.on('baselayerchange', function() {{
+            console.log("🎨 Theme changed, updating particle colors...");
+            setTimeout(immediateParticleReload, 100); // Small delay to ensure theme change is complete
+        }});
         
         console.log("========================================");
         console.log("✅ SUCCESS: Real ECMWF wind visualization active!");