[Feature]: Implement LocalStorage Persistence for Theme/Dark Mode Toggle

[Ashvin-KS]

Problem Statement

When a user switches to dark mode, their preference resets on page reload.

Proposed Solution

Save the theme preference in localStorage so it persists across sessions.

Alternatives Considered

Using cookies or database storage (overkill for UI preferences).

Acceptance Criteria

• Theme persists on refresh
• Works for both dark and light themes

Additional Context

I would be happy to work on this for GSSoC 2026.

[github-actions]

Thanks for opening your first issue on DevTrack! 🎉

A maintainer will take a look shortly. In the meantime:

• Check the Contributing guide if you are planning to work on this
• Browse Discussions for Q&A and ideas
• Look for good first issue if you want somewhere to start

[shriya53]

Hi, I am Gssoc contributor and would like to work on this issue, please assisgn it to me
Here's a short implementation,
1)Find where the theme toggle/state is managed (likely in a ThemeProvider, context, or navbar toggle).
2)On app load, read the saved theme from localStorage:
const savedTheme = localStorage.getItem("theme");
3)If a saved theme exists, apply it:
document.documentElement.classList.toggle(
"dark",
savedTheme === "dark"
);
4)Whenever the user changes theme, update localStorage:
localStorage.setItem("theme", theme);
5)Ensure both themes are handled:
"dark" → add dark class
"light" → remove dark class
6)Test:
Switch to dark mode → refresh → theme stays dark
Switch to light mode → refresh → theme stays light
7)Optional improvement:
Default to system preference if no saved theme exists using:
window.matchMedia("(prefers-color-scheme: dark)")

[Ashvin-KS]

Hi maintainers, I've reviewed the codebase and the localStorage persistence for the dark/light theme toggle is already implemented in \src/components/ThemeContext.tsx\ (lines 22 and 38 — reads from localStorage on mount, writes on theme change). The inline script in \src/app/layout.tsx\ also handles flash prevention during SSR hydration.

• ✅ Theme persists on refresh
• ✅ Works for both dark and light themes
• ✅ System preference fallback via \prefers-color-scheme\

Since this feature already exists on the \main\ branch, this issue can be marked as completed. Happy to submit a PR adding tests or documentation if that would be valuable!

[Ashvin-KS]

Closing this issue as the feature was already implemented on main — \src/components/ThemeContext.tsx\ handles localStorage persistence at lines 22 and 38, reads from localStorage on mount, writes on theme toggle, and includes system preference fallback. The flash-prevention inline script in \src/app/layout.tsx\ also handles SSR hydration correctly.