Summary
When a user switches between Light and Dark mode using the ThemeToggle component, the selected theme is lost on page refresh. The app always defaults back to the system default instead of remembering the user's choice.
Description
The ThemeToggle.tsx component reads from ThemeContext and toggles the theme, but it does not persist the user's preference to localStorage. On every page refresh, the component re-initializes without checking for a saved preference. The theme selection should survive browser refreshes.
Steps to Reproduce
- Open the DevTrack dashboard at
http://localhost:3000/dashboard
- Click the Light / Dark toggle button in the header
- Confirm the theme switches (e.g., from Light to Dark)
- Refresh the page (F5 or Ctrl+R)
- Observe: the theme resets to the default instead of the previously chosen theme
Expected Behavior
After toggling the theme, the user's choice should be saved in localStorage. On page reload, ThemeContext should read this saved value and apply the correct theme without any flash or reset.
Actual Behavior
The theme resets to the default theme on every page reload. The user's manually selected theme is not remembered.
Environment
System Information (Optional)
- OS: Any
- Browser: Chrome 120+, Firefox 120+
- Node.js: 18+
- Component:
src/components/ThemeToggle.tsx, src/components/ThemeContext.tsx
Hello I am a GSSOC'26 COntributor and would love to work on this issue. Please assign it to me under gssoc'26
/assign gssoc
Summary
When a user switches between Light and Dark mode using the
ThemeTogglecomponent, the selected theme is lost on page refresh. The app always defaults back to the system default instead of remembering the user's choice.Description
The
ThemeToggle.tsxcomponent reads fromThemeContextand toggles the theme, but it does not persist the user's preference tolocalStorage. On every page refresh, the component re-initializes without checking for a saved preference. The theme selection should survive browser refreshes.Steps to Reproduce
http://localhost:3000/dashboardExpected Behavior
After toggling the theme, the user's choice should be saved in
localStorage. On page reload,ThemeContextshould read this saved value and apply the correct theme without any flash or reset.Actual Behavior
The theme resets to the default theme on every page reload. The user's manually selected theme is not remembered.
Environment
System Information (Optional)
src/components/ThemeToggle.tsx,src/components/ThemeContext.tsxHello I am a GSSOC'26 COntributor and would love to work on this issue. Please assign it to me under gssoc'26
/assign gssoc