Theme Switcher
The Theme Switcher lets customers toggle between light and dark color modes.
Features
Section titled “Features”- Toggle between light and dark modes
- Respects system preference (
prefers-color-scheme) - Remembers user choice across sessions
- Smooth transition between modes
- Accessible toggle button
Configuration
Section titled “Configuration”The theme switcher appears as an icon in the header. It automatically detects the user’s system preference and allows manual override.
Customization
Section titled “Customization”Dark mode colors are defined via CSS custom properties. Adjust the dark mode palette in your theme CSS to match your brand.
Best Practices
Section titled “Best Practices”- Test all pages in both light and dark modes
- Ensure sufficient contrast in both modes
- Check images look good on both light and dark backgrounds
- Verify form elements are readable in dark mode