ThemeToggle
Light and dark, or a segmented control that adds system.
import
import { ThemeToggle } from '@joshicodes/cock';Variants
Both write through the shared theme state, so they stay in step.
Behaviour
- Writes through the `theme` state, so the choice is stored and every other instance updates with it.
- Pair it with the no-flash script, or the page renders in the wrong scheme for a frame.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of ThemeToggle
| Prop | Type | Default |
|---|---|---|
variant `icon` swaps a single glyph, `segmented` shows light / dark / system. | 'icon' | 'segmented' | 'icon' |
class | string | — |