Layout

ThemeSwitcher

Floating theme + dark/light picker. Drives `data-theme` and `data-mode` on `<html>` and persists to localStorage. Ships with a `<ThemeScript>` helper that runs pre-paint to avoid flashes.

Preview

dark

// live switcher sits in the corner of every docs page

Installation

terminal

bash

npx @entrepta/cli@latest add theme-switcher

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

theme-switcher.tsx

tsx

import {
  ThemeScript, ThemeSwitcher,
} from "@/components/entrepta/theme-switcher"

const THEMES = [
  { id: "entrepta", label: "entrepta", color: "#7C6BFF", lightColor: "#6B5BFF" },
  { id: "blossom",  label: "blossom",  color: "#CC2E36", lightColor: "#B8262E" },
  { id: "ivy",      label: "ivy",      color: "#35A365", lightColor: "#1E8350" },
] as const

// In your root <head>, before React hydrates:
<ThemeScript storageKey="myapp" />

// Anywhere in the tree (usually the root layout):
<ThemeSwitcher
  themes={THEMES}
  defaultTheme="entrepta"
  storageKey="myapp"
/>

Props

Prop	Type	Default	Description
themes	ThemeOption[]	—	List of themes. Each `{ id, label, color, lightColor? }`. Required.
defaultTheme	string	themes[0].id	Theme id to use when nothing is stored.
defaultMode	"dark" \| "light"	"dark"	Initial mode when nothing is stored.
storageKey	string	"entrepta"	Prefix for the two localStorage keys (`:theme`, `:mode`).
position	"bottom-right" \| "bottom-left" \| "top-right" \| "top-left"	"bottom-right"	Where the floating trigger anchors.
hideModeToggle	boolean	false	Hide the dark/light section and the mode label on the trigger.
disableMode	boolean	false	Lock mode to `defaultMode`. Useful for dark-only sites.