Implement comprehensive dark mode with theme toggle for eShop web application

[Copilot]

This PR introduces a comprehensive dark mode feature for the eShop web application, addressing the need for better user experience in low-light environments and modern UI expectations.

Implementation Overview

The dark mode implementation consists of three main components:

1. Theme Management Service: A new IThemeService and ThemeService that handles theme state management, localStorage persistence, and DOM updates through JavaScript interop.

2. CSS Variables Architecture: Comprehensive CSS custom properties system that defines all colors as variables, enabling seamless theme switching without code duplication.

3. Theme Toggle Component: A user-friendly toggle button with animated sun/moon icons positioned in the header navigation for easy access.

Key Features

• Instant Theme Switching: Click the toggle button to immediately switch between light and dark modes
• Persistent Preferences: User's theme choice is automatically saved to localStorage and restored on subsequent visits
• Comprehensive Coverage: All components updated including navigation, product catalogs, shopping cart, forms, and interactive elements
• Smooth Transitions: 0.3-second CSS transitions provide polished visual feedback when switching themes
• Accessibility: Proper ARIA labels and focus management for screen readers

Technical Details

The implementation uses CSS custom properties to define color schemes:

:root {
  --color-background: #ffffff;
  --color-text: #000000;
  /* ... other light theme colors */
}

.dark-theme {
  --color-background: #121212;
  --color-text: #ffffff;
  /* ... dark theme overrides */
}

The ThemeService handles the logic:

public async Task ToggleThemeAsync()
{
    _isDarkMode = !_isDarkMode;
    await ApplyThemeAsync();
    ThemeChanged?.Invoke();
}

Visual Demonstration

Light Mode:

Dark Mode:

Components Updated

All major UI components have been updated to support theming:

• Header navigation and user menus
• Product catalog and search functionality
• Shopping cart and checkout flows
• Footer and error boundaries
• Form inputs and buttons

The dark mode provides excellent contrast ratios and maintains the application's professional appearance while reducing eye strain in low-light conditions.

Fixes #70.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.