Layout
ModeToggle
Dark/light switch with no theme picker. Drives `data-mode` on `<html>` and persists to localStorage. Renders inline by default, or floats in a corner with `position`. Ships with a `<ModeScript>` helper that runs pre-paint to avoid flashes.
Preview
Installation
terminal
bash
npx @entrepta/cli@latest add mode-toggle// Resolves dependencies, copies the source, and installs npm packages automatically.
Usage
mode-toggle.tsx
tsx
import {
ModeScript, ModeToggle,
} from "@/components/entrepta/mode-toggle"
// In your root <head>, before React hydrates:
<ModeScript />
// Inline, drop it in a nav or a toolbar:
<ModeToggle />
<ModeToggle variant="labeled" size="sm" />
// Floating, same anchors as ThemeSwitcher:
<ModeToggle position="bottom-right" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "icon" | "labeled" | "icon" | `labeled` adds the current mode name next to the glyph. |
| size | "sm" | "md" | "md" | Height and padding scale. |
| position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | — | Anchors the button to a screen corner. Omit to keep it inline. |
| defaultMode | "dark" | "light" | "dark" | Mode to use when nothing is stored. |
| storageKey | string | "entrepta" | Prefix for the localStorage key (`:mode`). Match it to ThemeSwitcher. |
| onModeChange | (mode: ThemeMode) => void | — | Fires after the mode changes. |