Components
Theme Switcher
A localStorage-persisted light, dark, and system theme switcher with a ScriptOnce startup script to avoid theme flash.
Install
Add this registry item to your app with shadcn.
bash
bunx --bun shadcn@latest add https://krakstack.net/r/theme-switcher.jsonOverview
theme-switcher provides a compact dropdown for switching between light, dark, and system themes. It persists the selected theme in localStorage, applies the resolved theme class to the document element, and renders a ScriptOnce startup script from ThemeProvider to avoid theme flash. Labels are stored in the component file and can be overridden with the messages prop.
Usage
Wrap your app in ThemeProvider.
tsx
import { ThemeProvider } from "@/components/ui/theme-switcher";
<ThemeProvider>{children}</ThemeProvider>Render the switcher from a component inside the provider.
tsx
import { ThemeSwitcher, useTheme } from "@/components/ui/theme-switcher";
const { theme, setTheme } = useTheme();
<ThemeSwitcher value={theme} onChange={setTheme} />
<ThemeSwitcher
value={theme}
onChange={setTheme}
messages={{ title: "Theme", light: "Day", dark: "Night" }}
/>Dependencies
Packages and shadcn components required by this registry item.