Add dark and light mode toggle with system preference detection

[Akatenvictor]

What

Implement theme switching between dark mode and light mode with automatic detection of system preference and persistent user selection.

Why

The current theme is static. Users expect theme control for visual comfort, especially for extended listening sessions. System preference detection provides a sensible default.

Scope

In: Theme toggle button, CSS custom properties for colors, system media query detection, localStorage persistence, smooth transition between themes
Out: Per-component theme overrides, custom color picker

Acceptance Criteria

• Three states: light, dark, system (default)
• Theme persists across sessions via localStorage
• System preference changes detected via matchMedia
• Theme switch animates with 200ms transition on background/color properties
• No flash of wrong theme on page load (SSR compatible)

Technical Context

• Extend globals.css with CSS custom properties for both themes
• Add ThemeProvider in context/ that wraps the app
• Store preference in localStorage key "theme-preference"

[codewithzubair07]

@codewithzubair07 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

i would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @codewithzubair07 to this issue.

[ahmedkabeer930-rgb]

@ahmedkabeer930-rgb has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hi Maintainer, I’m interested in working on this issue. I have experience with similar tasks and am confident I can deliver a solid solution that meets the requirements. I’m available to begin immediately. Kindly assign it to me. Thank you.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ahmedkabeer930-rgb to this issue.

[wagmiiii]

@wagmiiii has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

pls assign to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @wagmiiii to this issue.

[drips-wave]

Congratulations, @wagmiiii! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @wagmiiii: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @wagmiiii as part of the Stellar Wave Program's 8th Wave 🥳

😎 @wagmiiii: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.