Layout

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

view .md

Preview

icon

labeled

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.