Dark Mode Toggle
A sun/moon toggle button for switching between light and dark themes, with smooth icon transitions.
Preview
Sizes
Usage
tsx
import { DarkModeToggle } from "zostel-ui";
import { useTheme } from "zostel-ui/hooks";
const { theme, setTheme } = useTheme();
<DarkModeToggle
theme={theme}
onToggle={() => setTheme(theme === "dark" ? "light" : "dark")}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme | "light" | "dark" | "light" | Current active theme |
onToggle | () => void | — | Callback when the toggle is clicked |
size | "sm" | "md" | "lg" | "md" | Size of the toggle button |
themeType:
"light" | "dark"Default: "light"
Current active theme
onToggleType:
() => voidDefault: —
Callback when the toggle is clicked
sizeType:
"sm" | "md" | "lg"Default: "md"
Size of the toggle button