Feature Description
Add a theme switcher button in the navbar that allows users to manually toggle between light and dark themes, independent of their system preferences.
Problem It Solves
The CSS currently includes dark mode media queries that only respond to system preferences. Users have no manual control to choose their preferred theme, limiting accessibility and user choice. Students studying at night may prefer dark mode regardless of system settings, while others may prefer light mode during the day.
Proposed Solution
- Create a ThemeToggle component with sun/moon icons
- Add theme state management using localStorage for persistence
- Integrate ThemeToggle in app/components/navbar.tsx
- Update CSS to respect both system preferences and manual user selection
- Add smooth transitions between theme changes
- Ensure all components and pages properly support both themes
- Consider adding a "system default" option
Additional Context
The dark mode CSS already exists in globals.css (lines 19-24), so this primarily requires adding the UI control and state management. The current implementation uses CSS variables for theming, making it straightforward to implement manual theme switching.
Feature Description
Add a theme switcher button in the navbar that allows users to manually toggle between light and dark themes, independent of their system preferences.
Problem It Solves
The CSS currently includes dark mode media queries that only respond to system preferences. Users have no manual control to choose their preferred theme, limiting accessibility and user choice. Students studying at night may prefer dark mode regardless of system settings, while others may prefer light mode during the day.
Proposed Solution
Additional Context
The dark mode CSS already exists in globals.css (lines 19-24), so this primarily requires adding the UI control and state management. The current implementation uses CSS variables for theming, making it straightforward to implement manual theme switching.