Dark Mode Toggle

Vanilla Breeze uses the CSS light-dark() function for automatic theme switching. This snippet shows three approaches:

1. Automatic - Follows OS/browser preference (default)
2. Manual toggle - Switch via data-mode attribute
3. Three-way - Light / System / Dark selector

Try the toggle button and three-way selector:

Enable light-dark support and define mode overrides:

Style a theme toggle button with icon swapping:

Minimal JavaScript for toggle functionality with localStorage persistence:

For users who want explicit Light / System / Dark options:

The CSS light-dark() function returns different values based on the computed color-scheme:

This is simpler than media queries because it automatically responds to both OS preferences AND manual color-scheme overrides.