The current design looks stunning in light/glassmorphism style, but many users prefer a dark theme — especially at night or when checking weather in low-light conditions. Adding a dark mode toggle would greatly improve user experience and modernize the app even further.
Proposed Features
- A clean toggle button (sun/moon icon) in the header or settings area
- Auto dark mode based on user's system preference (
prefers-color-scheme)
- Smooth transition animation when switching themes
- All colors (backgrounds, text, cards, charts, particles, etc.) should adapt properly
- The dynamic weather background should still work beautifully in dark mode
Why This Matters
- Better accessibility and user comfort
- Makes the app feel more premium and complete
- Helps attract more stars and contributors
Implementation Ideas
- Use CSS custom properties (variables) for colors — this will make switching very easy
- Store user preference in
localStorage
- Add a small settings gear icon if needed
- Bonus: Make the toggle match the weather (e.g., moon icon when it's night time)
Acceptance Criteria
- Toggle works instantly with smooth transition
- Respects system dark mode preference on first visit
- Preference is saved and restored on page reload
- No visual bugs on mobile or desktop
- Charts, AQI cards, and particle effects look good in dark mode
The current design looks stunning in light/glassmorphism style, but many users prefer a dark theme — especially at night or when checking weather in low-light conditions. Adding a dark mode toggle would greatly improve user experience and modernize the app even further.
Proposed Features
prefers-color-scheme)Why This Matters
Implementation Ideas
localStorageAcceptance Criteria