feat: Implement dark mode for accessibility
Relates to issue #7
Changes
New Files Created
- static/css/dark-mode.css - Complete dark mode stylesheet with CSS custom properties for consistent theming, WCAG AA compliant contrast ratios (4.5:1), and comprehensive coverage for all UI elements including header, navigation, footer, cards, buttons, forms, product grid, cart items, and checkout form
- static/js/theme-toggle.js - Theme toggle functionality with localStorage persistence, system preference detection, automatic theme switching, smooth transitions, and full accessibility support with ARIA attributes
Modified Files
- templates/base.html - Added color-scheme meta tag, dark-mode.css stylesheet link, theme toggle button in navigation with accessibility attributes, and theme-toggle.js script
- static/css/style.css - Added CSS custom property for transition speed and smooth transitions for background-color and color changes, plus theme toggle button styles
Key Features
User Experience
- Users can toggle dark mode by clicking the theme button in the navigation
- Theme preference is saved and persists across sessions
- If no manual preference is set, the app respects system dark mode settings
- Smooth visual transitions prevent jarring theme switches
- All interactive elements maintain proper contrast and visibility in both modes
Edited by Placeholder Adam Zwickey