Component

ThemeSwitcher

Render controlled light and dark theme controls in mini or full mode.

Usage

Import the component entry and start with its smallest complete example.

Import

import { ThemeSwitcher } from "@chitrank2050/monoline-ui/theme-switcher"

Basic usage

const [theme, setTheme] = useState<"light" | "dark">("light")

<ThemeSwitcher
  mode="mini"
  theme={theme}
  onThemeChange={setTheme}
/>

<ThemeSwitcher
  mode="full"
  theme={theme}
  onThemeChange={setTheme}
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

ThemeSwitcher handles a controlled light and dark choice as a compact button or full switch.

Avoid when

The app offers more than two themes, or the caller cannot manage persistence and document updates.

Accessibility

ThemeSwitcher supplies a state-specific accessible label and uses a native button in mini mode or a labeled switch in full mode.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

themelight | darkControlled theme value

onThemeChange(theme) => voidTheme change callback

modemini | fullCompact icon button or full sun/toggle/moon control

sizesm | md | lgSwitcher scale

lightLabelstringAccessible label when switching to light

darkLabelstringAccessible label when switching to dark

Design tokens

Theme variables this component reads for color, spacing, and motion.

--duration-shortCSS varToggle track and thumb transition duration

--ease-out-expoCSS varThumb movement easing without overshoot

--accent / --accent-softCSS varFull-mode active track palette

--focus-ringCSS varKeyboard focus state

Implementation

The source used by the example above, including any state it needs.

import { ThemeSwitcher } from "@chitrank2050/monoline-ui/theme-switcher"

export function ThemeControl() {
  const [theme, setTheme] = useState<"light" | "dark">("light")

  return (
    <ThemeSwitcher
      mode="full"
      theme={theme}
      onThemeChange={setTheme}
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentToggleComponent · ReferenceReference→02ComponentButtonComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview