042
Theme Toggle
Actionpicked: —
Customize
Options
Direction
Code
// app/layout.tsx — before first paint, in <head>
<script dangerouslySetInnerHTML={{ __html: themeInitScript("mood") }} />
// anywhere
<ThemeToggle storageKey="mood" aria-label="Theme" />Install
npx shadcn@latest add https://components.haedong.dev/r/theme-toggle.json
Props
Extends RadioGroup's props (orientation, aria-label…). Picking a mode sets data-theme="light|dark" (this registry's theme.css; system removes it so prefers-color-scheme decides) and toggles the .dark class (a stock shadcn theme), stores the choice, and syncs every ThemeToggle on the page. Ships with themeInitScript(storageKey) in theme-script.ts: inline it in your root layout's <head> so the first paint is already right. applyTheme / setTheme are exported for custom controls. This site's Settings drawer is one; the control above is live.
| Prop | Type | Description |
|---|---|---|
| storageKey | string | localStorage key. Defaults to "theme". This site uses "mood". |
| options | ThemeMode[] | Modes offered, in order. Defaults to ["light", "dark", "system"]. |
| onModeChange | (mode: ThemeMode) => void | Called after a pick is applied. |