Theme toggler
The control that switches light and dark
Dark theme
Installation
nub add @gpuixui/componentsUsage
import { useState } from "react";
import {
ThemeProvider,
ThemeToggler,
darkTheme,
lightTheme,
} from "@gpuixui/components";
const [mode, setMode] = useState<"light" | "dark">("dark");
<ThemeProvider theme={mode === "dark" ? darkTheme : lightTheme}>
<ThemeToggler mode={mode} onChange={setMode} />
</ThemeProvider>;API
| Prop | Type | Default |
|---|---|---|
mode | "light" | "dark" | — |
onChange | (mode: "light" | "dark") => void | — |
lightLabel | string | "Switch to light theme" |
darkLabel | string | "Switch to dark theme" |
size | "sm" | "md" | "lg" | "md" |
level | SurfaceLevel | "slow" |
className | string | — |
style | StateStyle<ThemeTogglerState> | — |
Edit this page on GitHubpackages/components/docs/theme-toggler.mdx