[FEATURE] Dark/Light Mode Toggle #26
Description
Feature Request: Dark Mode / Light Mode Toggle
📌 Description
Introduce a toggle switch in the frontend UI that allows users to seamlessly switch between dark mode and light mode, depending on their preference.
🎯 Motivation
- Enhances user experience and accessibility
- Reduces eye strain during night-time usage
- Matches modern UX expectations for personalization
🖼 Design Proposal
- Toggle can be placed in the navbar or settings dropdown
- Icons like 🌞 / 🌙 can indicate modes for better intuitiveness
- Can use
localStorageoruseContextto persist user preference
💡 Technical Suggestions
- Leverage Tailwind CSS's built-in dark mode feature
- Configure
tailwind.config.jswith:darkMode: 'class'
- Configure
- Use a theme context to manage and apply
darkclass to<html>or<body> - Store theme preference in
localStorageto persist across sessions
📚 Reference in README
This aligns with the project's focus on a modern, responsive UI as highlighted in the README.md under:
✅ Responsive and modern UI using Tailwind CSS
✅ Acceptance Criteria
- A toggle switch is present in the UI
- Toggling changes theme across all pages/components
- User preference is persisted (e.g., via
localStorage) - UI is visually appealing in both themes
- Follows accessibility and contrast best practices
🙌 Want to work on this?
- Comment on this issue thread to get yourself assigned right away!
- Fork this repository, and raise a PR with the necessary changes!