Theme Toggle

Installation

Installs are paused for now. You can still preview and customize every component on its page.

Usage

import { ThemeToggle } from "@/components/theme-toggle";

<ThemeToggle />

A round, glossy button that matches the opposite of your theme: dark with a gold sun in light mode, and light with a dark moon in dark mode. Tap it and the theme flips instantly. There are no animations, so it never makes you wait.

It still feels like a small push switch. The button stands up out of its socket in light mode and sits latched lower in dark mode. Pressing sinks it almost flat, all in the same frame.

It also shows the right icon on the very first frame, before the page's JavaScript loads, as long as your theme uses the dark class (the next-themes default for shadcn).

It switches your site's theme through next-themes, the same setup as the shadcn dark mode guide. Wrap your app in its ThemeProvider with attribute="class" and the toggle works with no props. Add disableTransitionOnChange to the provider too, so the rest of your page flips in the same frame instead of fading its colors.

Not using next-themes? Pass theme and onThemeChange and handle the theme yourself:

const [theme, setTheme] = useState<"light" | "dark">("light");

<ThemeToggle theme={theme} onThemeChange={setTheme} />

Screen readers hear "Switch to dark mode" or "Switch to light mode", and it works with Tab, Enter and Space.

Props