A simple website that automatically detects and displays whether the user's system is set to light mode or dark mode using CSS prefers-color-scheme media queries.

• Automatic Detection: Uses window.matchMedia('(prefers-color-scheme: dark)') to detect the user's color scheme preference
• Real-time Updates: Listens for changes in color scheme and updates the display immediately
• Responsive Design: Adapts colors, icons, and styling based on the detected theme
• Visual Feedback: Shows sun (☀️) for light mode and moon (🌙) for dark mode
• Smooth Transitions: CSS transitions provide smooth color changes when switching themes

1. CSS Variables: Uses CSS custom properties that change based on @media (prefers-color-scheme: dark)
2. JavaScript Detection: Uses matchMedia API to detect the current color scheme
3. Event Listeners: Listens for changes in color scheme preference to update in real-time
4. Visual Indicators: Updates text, icons, and styling to reflect the current mode

• Pure HTML, CSS, and JavaScript (no external dependencies)
• Uses CSS custom properties for theme variables
• Implements prefers-color-scheme media queries for automatic theme switching
• JavaScript matchMedia API for programmatic detection
• Event listeners for real-time theme change detection

Simply visit the website and it will automatically detect your system's color scheme preference. Try changing your system's appearance settings to see the theme switch in real-time!

• Windows: Settings → Personalization → Colors
• macOS: System Preferences → General → Appearance
• iOS/Android: Settings → Display → Dark mode

├── index.ts          # Main HTTP handler serving the website
└── README.md         # This documentation