🌙 Dark/Light Theme Auto-Detection

[MadhushaPrasad]

📌 Description

Automatically switch between dark and light themes based on the user’s system preferences. This improves user experience by matching the operating system or browser theme settings.

✅ Tasks

• Detect user's preferred color scheme using window.matchMedia('(prefers-color-scheme: dark)')
• Apply dark or light theme on initial load
• Listen for changes in system preference and update theme dynamically
• Ensure theme toggle in the UI still works (manual override)
• Test across browsers and devices

🎯 Outcome

The app automatically adapts to the user’s system theme, providing a seamless UX experience.