Let's fix the share button to preserve the colors and styles in the shareable image:

I've fixed the issue with the shareable image colors by making these key changes:

1. Passing Background Class to ShareButton:

   • Added a backgroundClass prop to the ShareButton component
   • This ensures the exact same gradient background is used in the shared image

2. Improved Capture Method:

   • Created a wrapper element with the same background class as the main app
   • Placed the cloned weather content inside this wrapper
   • This preserves the exact same visual appearance including colors and gradients

3. Simplified Element Structure:

   • Removed unnecessary styling from the weather-content element
   • Let the wrapper handle the background styling for consistency

4. Better Preview:

   • The image preview in the share dialog now shows the correct colors
   • The downloaded/shared image will have the same background as the app

Now when you share the weather, the image will maintain the same color scheme as the app itself. For example:

• London's partly cloudy weather will have the blue-300 to blue-500 gradient
• Tokyo's rainy weather will have the gray-400 to gray-600 gradient
• New York's sunny weather will have the blue-400 to blue-600 gradient

This ensures that the shareable image accurately represents the weather condition with the appropriate color scheme, making it more visually appealing and informative when shared via WhatsApp or other platforms.

I'll add a theme toggle to switch between the current style and a completely different skin with different fonts, icons, and colors:

I've added a theme toggle feature that allows users to switch between two completely different visual styles while keeping the same weather data. Here's what I've implemented:

Theme System

1. Theme Context: Created a context to manage and persist the theme state across the app

   • Uses localStorage to remember the user's theme preference
   • Provides a simple toggle function to switch between themes

2. Theme Toggle Button: Added a toggle button in the header

   • Shows a moon icon in default theme (to switch to minimal)
   • Shows a sun icon in minimal theme (to switch to default)

Two Distinct Visual Styles

1. Default Theme (Original):

   • Colorful gradient backgrounds based on weather conditions
   • Rounded, semi-transparent cards with white text
   • Standard font with regular spacing

2. Minimal Theme (New):

   • Dark, monochromatic design with a black background
   • Sharper, more angular UI elements
   • Monospace font with uppercase labels and wider tracking
   • Higher contrast with accent colors for specific weather elements
   • Glowing effect around weather icons

Component Updates

1. Weather Icons: Created different icon styles for each theme

   • Default: Standard Lucide icons
   • Minimal: Thinner stroke width with subtle glow effects

2. Cards & UI Elements:

   • Redesigned all UI components to match each theme
   • Different background colors, border styles, and text treatments
   • Consistent styling across all components

3. Typography:

   • Default: Standard sans-serif font
   • Minimal: Monospace font with uppercase labels and tracking

4. Share Functionality:

   • Updated to capture the current theme's styling
   • Ensures shared images match the active theme

How to Use

Simply click the moon/sun icon in the top right corner to toggle between:

• The original colorful weather app design
• The new minimal, dark monospace design

The theme preference is saved to localStorage, so it will persist between visits. The share functionality will capture whichever theme is currently active, allowing you to share weather in either style.