Day 15: Light / Dark Mode Toggle

Switch themes with one click. Your preference is saved.

This is a demo of a light/dark theme switcher using CSS variables and LocalStorage. Click on the moon/sun icon above to change the theme.

How it works (short)

The website uses a data-theme attribute on the HTML tag. CSS variables define the theme colors. JavaScript toggles the attribute and saves the choice in LocalStorage. On page load, the saved theme is applied.