DUThemeToggle
UtilityCycles light / dark / system theme modes.
import { DUThemeToggle } from 'deri-ui';Live preview
typescript
<DUThemeToggle mode={mode} onModeChange={setMode} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | 'light' | 'dark' | 'system' | — | Current |
| onModeChange | (mode) => void | — | Handler |
| modes | DUThemeMode[] | — | Cycle list |
Usage
import { DUThemeToggle } from 'deri-ui';
<DUThemeToggle mode={mode} onModeChange={setMode} />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.