Feature:Add Dark & Light Mode Toggle for Login and Signup Pages #292
Description
Is there an existing issue for this?
- I have searched the existing issues
Summary
Add a dark and light mode switch to the login and signup pages for better user accessibility and comfort across different lighting environments.
Motivation / User Problem
Currently, the login and signup pages only support a single theme, making it difficult for users to use the app comfortably in low-light conditions.
Adding dark mode will enhance usability, reduce eye strain, and make the interface more visually appealing.
User Stories
As a user, I want to switch between dark and light themes on the login and signup pages.
As a night user, I want dark mode so that the page doesn’t strain my eyes.
As a returning user, I want my theme preference saved, so I don’t have to change it every time.
Proposed Solution / Design Notes
Add a theme toggle button (🌙 / ☀️ icon) in the top-right corner of the login/signup pages.
Use CSS variables for colors (e.g., --background-color, --text-color, etc.).
Save the theme preference in localStorage for persistence.
When a user revisits, the selected theme should load automatically.
Alternatives Considered
Using system theme detection only — rejected because it removes manual control for users.
Priority
Medium
Additional Context
This will make the login and signup pages look consistent with future dark/light themes across the platform.
Tech stack suggestion:
Frontend: HTML, CSS variables, JavaScript
Optional: Tailwind or Bootstrap dark mode classes
Mockup idea:
Dark Mode: Black background, white text, subtle neon accent on buttons.
Light Mode: White background, black text, soft shadows.