Implement dark mode theme for better accessibility

Objective

Improve accessibility and user experience by adding a dark mode toggle to the swag shop.

Requirements

• Toggle switch in header to enable/disable dark mode
• Dark theme applied to all pages (products, cart, checkout)
• User preference saved in browser local storage
• Smooth transition animations between themes

Design Guidelines

• Use consistent dark color palette
• Ensure sufficient contrast ratios (WCAG AA compliance)
• Maintain brand colors where appropriate
• Toggle should be intuitive and accessible

Technical Notes

• Consider CSS variables for theme switching
• Respect system preference (prefers-color-scheme)
• Test with accessibility tools

Acceptance Criteria

• Dark mode toggle implemented in header
• All pages support dark theme
• User preference persists across sessions
• Smooth theme transitions
• WCAG contrast ratios met
• Tests added for theme switching logic

Quick Win