Theme Toggle

Theme switcher with persistence and system preference detection.

← Back to components GitHub Repo Playground

Basic Usage

Toggle between light and dark themes

Click to switch themes
<theme-toggle></theme-toggle>

Event Handling

Listen for theme changes

Waiting for theme change...
themeToggle.addEventListener('theme-changed', (e) => { console.log('Theme:', e.detail.theme); });

Programmatic Control

Control the theme via JavaScript

themeToggle.setTheme('dark'); themeToggle.toggle();

Custom Storage Key

Use a custom localStorage key

<theme-toggle storage-key="my-app-theme"></theme-toggle>

No Persistence

Disable localStorage persistence

<theme-toggle persist="false"></theme-toggle>