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.
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:
localStorageprefers-color-schemeKey Design Decisions
prefers-color-schemeon first load as the default theme, then persist the user’s selection inlocalStorageunder a key likems-themedark-modeclass on.landing-rootto keep styles scoped properly and avoid affecting unrelated dashboard/app layoutsI have read the CONTRIBUTING.md guidelines carefully and would like to work on this enhancement under GSSoC, NSoC.