Add Theme Persistence to localStorage

[planetoftheweb]

Add Theme Persistence to localStorage

Description

Currently, the theme toggle component (ToggleTheme.jsx) allows users to switch between auto, light, and dark themes, but the preference is not persisted across page reloads. Users have to re-select their preferred theme every time they visit the application.

Current Behavior

• Theme selection works correctly during the session
• Theme resets to 'auto' on page reload
• No persistence mechanism in place

Expected Behavior

• User's theme preference should be saved to localStorage
• On page load, the app should check localStorage and apply the saved theme
• If no saved preference exists, default to 'auto'
• Theme persistence should work across browser sessions

Implementation Details

Files to Modify

• src/components/ToggleTheme.jsx

Proposed Changes

1. Add localStorage read on component mount:

useEffect(() => {
  // Check for saved theme preference on mount
  const savedTheme = localStorage.getItem('stargazers-theme');
  if (savedTheme && ['auto', 'light', 'dark'].includes(savedTheme)) {
    setTheme(savedTheme);
  }
}, []); // Run once on mount

2. Save theme to localStorage when changed:

const toggleTheme = () => {
  let newTheme;
  switch (theme) {
    case 'auto':
      newTheme = 'light';
      break;
    case 'light':
      newTheme = 'dark';
      break;
    case 'dark':
      newTheme = 'auto';
      break;
  }
  setTheme(newTheme);
  // Save to localStorage
  localStorage.setItem('stargazers-theme', newTheme);
}

3. Handle localStorage errors gracefully:

• Wrap localStorage operations in try-catch blocks
• Fallback to default behavior if localStorage is unavailable

Technical Considerations

• Use a namespaced key ('stargazers-theme') to avoid conflicts
• Validate stored values before applying them
• Consider adding a method to clear stored preferences
• Test in private/incognito mode where localStorage might be restricted

Acceptance Criteria

• Theme preference persists across page reloads
• Theme preference persists across browser sessions
• Invalid stored values are handled gracefully
• Works correctly when localStorage is unavailable
• No console errors in any scenario

Additional Enhancements (Optional)

• Add a "Reset to System Default" option
• Show a toast notification when theme is changed
• Add keyboard shortcut for theme toggle (e.g., Ctrl+Shift+D)

Testing Steps

1. Load the application
2. Change theme from auto → light → dark → auto
3. Refresh the page and verify theme persists
4. Close and reopen browser, verify theme persists
5. Clear localStorage and verify app defaults to 'auto'
6. Test in private browsing mode

Priority

Medium - This is a quality of life improvement that enhances user experience

Labels

• enhancement
• good first issue
• frontend
• accessibility