Harshdev625 / Harshdev625/SDEverse

Feature:Add Dark & Light Mode Toggle for Login and Signup Pages

Open
#292 6 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
JavaScript
Stars
25
Forks
52
PR merge metrics
No merged PRs in 30d

Description

### Is there an existing issue for this?

- [x] 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.