Add “Dark Mode / Light Mode” toggle switch in top navbar #671
Description
@SreejaniBanik ji , ### What is the problem / missing feature
Currently, the UI is fixed to a single theme (or defaults) and does not allow users to toggle between dark/light theme modes.
Proposed solution
- Add a toggle switch (sun/moon icon) in the top navbar or header area.
- On toggle, apply a CSS class (e.g.
.dark-mode) on the root<body>element. - Provide CSS variables (e.g.
--bg-color,--text-color) in:rootfor light and dark mode, and switch them accordingly. - Store user preference in
localStorageso that it persists across sessions. - On app initialization, check stored preference and apply the correct theme.
- Ensure that components, buttons, links, etc. all render legibly in both modes.
Acceptance criteria
- The toggle is visible and functional.
- Theme persists across page reloads.
- No visual regressions in core pages (index, challenges page, editor page).
- (Optional) Smooth transition or CSS transition effect.
Additional notes
- I would reuse existing CSS classes and variables; and avoid duplicating styles.
- i might write minimal test or verification steps (manually check pages).