Add Theme Toggle (Light/Dark Mode) + User Personalization Features for Enhanced Accessibility & UX #12
Description
Currently, the Student Portal has a clean interface but lacks personalization and accessibility features that enhance the user experience, especially for long study hours or varied environments.
I propose a "Personalization & Accessibility" enhancement which includes:
🎨 1. Theme Toggle (Light/Dark Mode)
Allow users to toggle between Light and Dark themes.
Store preference in localStorage so it persists across sessions.
Use TailwindCSS dark: variants or CSS variables for implementation.
Place toggle in navbar or user profile dropdown.
Add icons for better UX (e.g., 🌙 / ☀️).
🔠 2. Font Size Adjustment (Accessibility)
Allow users to increase/decrease font size for better readability.
Provide options like: Small / Default / Large in Settings or as a floating control.
Implement using CSS classes or rem-based styling.
Store selection in localStorage.
🌐 3. Language Preference Dropdown (for future-proofing i18n)
Add a dropdown in the navbar or settings to let users select language (even if only English is available for now).
Structure the code to be easily extensible with i18n libraries (like react-i18next) in future.
📝 4. Customizable Dashboard Greeting
Use the student’s name and time of day to show a greeting:
“Good Morning, Daksh!”
“Good Evening, Riya!”
Adds personalization and a warm UX touch.
Can use JavaScript’s Date and user profile name.
📂 Files to Modify:
App.js or root layout
Navbar.jsx or header component
Dashboard.jsx or landing page
Settings.jsx (optional, if modular settings page exists)
💻 Tech Stack Involved:
React
TailwindCSS / CSS Modules
localStorage
Optional: react-i18next (if multilingual support is considered in future)
✅ Why This Feature Is Needed:
Adds accessibility for students with visual strain
Improves personalization and user retention
Aligns the portal with UX best practices from modern EdTech apps
Enhances inclusivity (future multi-language readiness)
🤝 I'd love to work on this issue and contribute to the UI/UX layer of the project. Please let me know if you'd like a Figma wireframe/mockup before implementation.