CC's dark theme: Dark/Light Mode Toggle Component

[CCazac]

Feature Request: Dark/Light Mode Toggle Component
Summary
Implement a user-accessible toggle component that allows users to manually switch between dark mode and light mode themes in the Photo Gallery & Portfolio application.

Problem Statement
Currently, the application relies on the system's prefers-color-scheme setting for theme detection. Users cannot manually override their system preference or switch themes without changing their OS-level settings. This limits user control and reduces the application's usability in different viewing contexts.

Proposed Solution
Add a theme toggle component that provides:

Manual Theme Control: A visible UI toggle (button/switch) accessible from all pages
Persistent Preferences: Save user selection in localStorage to maintain preference across sessions
Immediate Theme Switching: Real-time theme changes without page reload
Accessibility: Keyboard navigation and proper ARIA attributes
Technical Implementation
Create a reusable ThemeToggle component in src/components/ui/
Implement a custom hook useTheme for state management
Use data-theme attribute on document root to control Tailwind's dark mode classes
Integrate toggle into the main layout (src/app/layout.tsx)
Handle SSR hydration properly to avoid theme flashing
User Stories
As a user, I want to switch to light mode when presenting my portfolio, regardless of my OS dark mode setting
As a user with visual preferences, I want to choose a theme that's most comfortable for browsing
As a user, I want my theme preference to be remembered when I return to the site
Acceptance Criteria

Toggle component is visible and functional on all pages

Clicking the toggle immediately switches between light and dark themes

User preference is saved in localStorage and persists across browser sessions

Component is keyboard accessible with proper focus states

Toggle includes appropriate icons (sun/moon) and ARIA labels

Existing Tailwind dark: classes continue to work without modification

No visual regressions on key pages (home, gallery, upload, admin)

Smooth transition animation between theme changes (respecting prefers-reduced-motion)
Priority
Medium - Enhances user experience and provides better control over the interface

Suggested Labels
enhancement, ui-component, accessibility, good-first-issue

This issue focuses specifically on implementing the toggle UI component and state management for theme switching.