Skip to content

Implement Dark Mode Toggle #360

@IshikaBanga26

Description

@IshikaBanga26

Add a Dark/Light Theme Toggle feature to improve user experience for learners who prefer low-light interfaces. The toggle should allow users to switch between light and dark themes and remember their choice across page reloads.

Why this is needed:

Reduces eye strain during night-time learning.

Makes the site look more modern and professional.

Increases accessibility and personalization.

Suggested Implementation:

Define color variables in CSS (:root and .dark-mode selectors).

Use a small toggle button (e.g., moon/sun icon) in the header or footer.

When clicked, the button toggles a .dark-mode class on the .

Use localStorage to persist the theme preference.

Optional: add a smooth transition between themes.

Tech Stack: HTML, CSS, JavaScript (localStorage)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions