# ModeToggle

> Dark/light switch with no theme picker. Drives data-mode on <html> and remembers the choice. The whole page changes at once, crossfaded where the browser has view transitions. Inline by default, or floating with position. ModeScript sets the mode before paint; add suppressHydrationWarning to your <html>.

Section: Layout. Docs: https://entrepta.vercel.app/docs/components/mode-toggle

## Install

```bash
npx @entrepta/cli@latest add mode-toggle
```

Files: `layout/mode-toggle.tsx`, `hooks/use-mode.ts`.
npm packages: `class-variance-authority`, `@phosphor-icons/react`.
Comes with: `use-mode`.

## Usage

```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. |