Brickslab.

@brickslab/ui-web

Simple, non-animated theme toggle for accessibility and performance. Cycles between light, dark, and system modes without animations.

Aperçu

Default (Shows current mode)

With Custom Label

Light Mode Default

Dark Mode Default

Props Table

PropTypeDéfautRequisDescription
classNamestring——Additional CSS class.
mode"light" | "dark" | "system""system"—Initial theme mode.
labelstring——Custom label text. Defaults to mode name.
onChange(mode: "light" | "dark" | "system") => void——Callback when mode changes.

Usage

tsx
import { ThemeToggleSimple } from "@brickslab/ui-web";

// Basic usage
<ThemeToggleSimple />

// Custom label
<ThemeToggleSimple label="Theme" />

// With callback
<ThemeToggleSimple
  onChange={(mode) => console.log("Theme:", mode)}
/>