Layout

ThemeSwitcher

Floating theme and dark/light picker, with the same panel, labels and rows as a dropdown. Several on one page stay in step. Drives data-theme and data-mode on <html> and remembers the choice. A switch lands all at once, crossfaded where the browser has view transitions. It needs every theme in your CSS: run init with --themes=all. ThemeScript sets the attributes before paint; add suppressHydrationWarning to your <html>.

view .md

Preview

Click it. It is the same switcher as the one in the corner, and they stay in step.

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"

// Switching needs every theme in your CSS: run init with --themes=all.
const THEMES = [
  { id: "entrepta", label: "entrepta", color: "#7C6BFF", lightColor: "#6656FF" },
  { id: "blossom",  label: "blossom",  color: "#CC2E36", lightColor: "#B02028" },
  { id: "ivy",      label: "ivy",      color: "#35A365", lightColor: "#258A50" },
] 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.