Skip to content

[FEATURE] - Add persistent light/dark theme toggle #199

@ash1shkumar

Description

@ash1shkumar

Is your feature request related to a problem?

Currently, the application does not provide users with a light/dark theme toggle option after authentication or while using the dashboard.

The landing page and dashboard use fixed themes, which limits personalization, accessibility, and overall user experience for users who prefer different viewing modes or system-based themes.


Describe the Solution

Add a global light/dark theme toggle across the application, especially after clicking "Get Started" and entering the dashboard.

Suggested implementation:

  • Add a theme toggle button in the navbar/dashboard header
  • Persist user preference using localStorage
  • Support automatic system theme detection using prefers-color-scheme
  • Apply smooth theme transitions across pages

Key Design Decisions

  • Read prefers-color-scheme on first load as the default theme, then persist the user’s selection in localStorage under a key like ms-theme
  • Toggle a dark-mode class on .landing-root to keep styles scoped properly and avoid affecting unrelated dashboard/app layouts
  • Place the toggle beside the “Get Started” button in the navbar using the same typography and minimal aesthetic already used throughout the site

I have read the CONTRIBUTING.md guidelines carefully and would like to work on this enhancement under GSSoC, NSoC.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions