[Frontend] Dark / Light Mode Toggle with System Preference Detection

[arpit2006]

Description

PatchPilot currently uses a fixed dark theme, with no option for users to switch to a light theme. This can reduce accessibility and usability for users who prefer light mode or whose operating system is configured to use a light color scheme.

Implement a theme system that automatically detects the user's system preference on first visit while allowing them to manually switch between dark and light modes. The selected theme should persist across sessions.

Proposed Solution

Introduce a theme provider that:

• Detects the user's prefers-color-scheme setting on first load.
• Applies the corresponding theme automatically.
• Allows users to toggle between dark and light mode using a button in the navigation bar.
• Persists the user's preference in localStorage.
• Uses CSS custom properties (already supported by the project's Tailwind/CSS variable setup) to define theme colors.

Acceptance Criteria

• Detect the user's prefers-color-scheme preference on first load.
• Automatically apply the matching theme if no saved preference exists.
• Add a theme toggle button to the top-right of the navigation bar.
• Persist the selected theme in localStorage.
• Restore the saved preference on subsequent visits.
• Ensure all theme colors are defined using CSS custom properties (no hard-coded hex values inside React components).
• Verify both themes meet WCAG AA contrast requirements for all text and interactive elements.
• Add descriptive accessibility labels to the toggle button:
  • "Switch to light mode"
  • "Switch to dark mode"

Expected Impact

• 🌗 Allows users to choose their preferred theme.
• 💻 Respects the operating system's default color scheme.
• ♿ Improves accessibility and readability.
• 🎨 Provides a cleaner and more maintainable theming system using CSS variables.
• ✨ Enhances the overall user experience across different environments and lighting conditions.

Difficulty: Easy–Medium

[github-actions]

👋 Welcome @arpit2006!

Thank you for opening an issue and contributing to Patchpilot. 🚀

Next Steps

• Please ensure you've provided all the required details.
• A maintainer will review your issue shortly.
• Feel free to ask questions if anything is unclear.

⚡ Want faster assignment and quicker responses?

Join our Discord community:

🔗 https://discord.gg/FcXuyw2Rs

We actively discuss issues, features, roadmap updates, and contributor support there.

Happy Contributing! 🎉