Usage
The Mode Toggle requires a ThemeProvider wrapper:
import { ThemeProvider } from "@/components/ui/theme-provider"
import { ModeToggle } from "@/components/ui/mode-toggle"
export default function App() {
return (
<ThemeProvider defaultMode="system">
<ModeToggle />
</ThemeProvider>
)
}Examples
Default
With Theme Selector
Combine with the Theme Selector for full theme control:
Color Mode
Theme Preset
Theme Provider
Wrap your app with the ThemeProvider to enable theme switching:
// app/layout.tsx or main.tsx
import { ThemeProvider } from "@/components/ui/theme-provider"
export default function RootLayout({ children }) {
return (
<html>
<body>
<ThemeProvider
defaultMode="system"
defaultPreset="default"
>
{children}
</ThemeProvider>
</body>
</html>
)
}API Reference
ThemeProvider Props
| Prop | Type | Default |
|---|---|---|
defaultMode | "light" | "dark" | "system" | "system" |
defaultPreset | ThemePreset | "default" |
modeStorageKey | string | "ui-theme-mode" |
presetStorageKey | string | "ui-theme-preset" |
useTheme Hook
const { mode, setMode, preset, setPreset, resolvedMode } = useTheme()| Property | Type | Description |
|---|---|---|
mode | "light" | "dark" | "system" | Current mode setting |
setMode | (mode) => void | Update the mode |
preset | ThemePreset | Current theme preset |
setPreset | (preset) => void | Update the preset |
resolvedMode | "light" | "dark" | Actual mode after resolving “system” |