[FEATURE] Add Dark/Light Mode Preference Persistence Using localStorage

[sudha09-git]

🧩 Feature Description

Currently, the theme toggle (dark/light mode) on DevPath resets to the default theme every time the page is refreshed or the user navigates to a different page. The user's preference is not saved anywhere, forcing them to re-toggle the theme on every visit.

🎯 Problem

• Theme selection resets on every page refresh
• Theme selection resets on every new tab/session
• Users are forced to manually toggle the theme repeatedly
• Poor user experience, especially for dark mode users

✅ Proposed Solution

Persist the user's theme preference using localStorage so that:

• The selected theme is saved when the user toggles it
• The saved theme is applied immediately on page load (before render) to avoid flash
• Works across page navigation and browser refreshes
• Falls back to system preference (prefers-color-scheme) if no saved preference exists

🖼️ Expected Behavior

1. User visits DevPath for the first time → system preference is used
2. User toggles to dark mode → preference saved to localStorage
3. User refreshes the page → dark mode is still active
4. User opens a new tab → dark mode is still active
5. User clears browser storage → falls back to system preference

💡 Implementation Hint

// Save preference on toggle
localStorage.setItem('theme', 'dark') // or 'light'

// Read preference on load (in ThemeProvider or _app.tsx)
const savedTheme = localStorage.getItem('theme')
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
const theme = savedTheme || systemTheme

• Update the ThemeProvider or equivalent context to read from localStorage on mount
• Add a script tag in _document.tsx or layout.tsx to apply theme before hydration to prevent flash of wrong theme (FWOT)

📋 Acceptance Criteria

• Theme preference is saved to localStorage on toggle
• Saved theme is applied on page refresh without flash
• Falls back to system prefers-color-scheme if no saved preference
• Works across all pages and navigation
• No visible flash of wrong theme on page load

🏷️ Suggested Labels

enhancement, good first issue, level: beginner, ui/ux, gssoc26

[sudha09-git]

/assign this issue to me
I'm Gssoc2026 contributor