Theme Toggle
A toggle button that switches between light and dark modes.
Preview
import { ThemeToggle } from '@/components/ui/theme-toggle'
export function ThemeTogglePreview() {
return <ThemeToggle variant="outline" size="icon-lg" />
}Installation
Usage
import { ThemeToggle } from '@/components/ui/theme-toggle'<ThemeToggle />API Reference
ThemeToggle Props
The ThemeToggle component uses the Shadcn Button component from @/components/ui/button, so it accepts all the same props.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "destructive" | "secondary" | "link" | "default" |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" |