Implement Dark Mode with Toggle Switch

Description

Add a dark mode feature to the Flask swag shop application with a user-friendly toggle switch that allows users to switch between light and dark themes.

Requirements

Core Functionality

• Create a toggle switch component for switching between light and dark modes
• Implement CSS variables for theme colors to enable easy theme switching
• Use localStorage to persist user's theme preference across browser sessions
• Ensure the selected theme is applied immediately when the page loads

Technical Implementation

• Define CSS custom properties (variables) for:
  • Background colors
  • Text colors
  • Border colors
  • Button colors
  • Any other theme-dependent colors
• Create separate color schemes for light and dark themes
• Implement JavaScript functionality to:
  • Toggle between themes
  • Save preference to localStorage
  • Load saved preference on page load
  • Update CSS variables dynamically

User Experience

• Toggle switch should be easily accessible and clearly labeled
• Theme transition should be smooth and not jarring
• All text should remain readable in both themes
• Ensure proper contrast ratios for accessibility

Acceptance Criteria

• Users can toggle between light and dark modes using the toggle switch
• Theme preference persists across browser sessions
• All UI elements are properly styled in both themes
• The feature works consistently across all pages of the Flask swag shop

---

Description was generated using AI