Components
Theme toggle
A day-to-night switch: the sun rolls across a sky that darkens, clouds drift off, stars come out and a shadow bites the sun into a moon. The page changes inside a circle that grows from the switch.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { ThemeToggle } from '@vizzele/react';
// Sets data-theme on <html> and reveals the new theme in a growing circle.
<ThemeToggle onThemeChange={(t) => localStorage.setItem('theme', t)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme / defaultTheme / onThemeChange | 'light' | 'dark' | — | Controlled or not. Uncontrolled, it reads <html data-theme> or the OS. |
apply | boolean | true | Set data-theme on <html>. |
wipe | boolean | true | Circle reveal with View Transitions (falls back to an instant swap). |
label | string | 'Dark mode' | Accessible name. |
Accessibility
- A role="switch" named "Dark mode" with aria-checked.
- The circle reveal is skipped with reduced motion and where View Transitions are not supported.