Brickslab.Toolsv2.1.1

@brickslab./ui-web

Animated theme toggle component for switching between light, dark, and system modes. Features smooth rotation animation and emoji icons.

Aperçu

Default (System mode)

Starting in Light Mode

With Custom Animation Duration

Props Table

PropTypeDéfautRequisDescription
classNamestring——Additional CSS class.
durationnumber500—Animation transition duration in ms.
mode"light" | "dark" | "system""system"—Initial theme mode.
onChange(mode: "light" | "dark" | "system") => void——Callback when mode changes.
reducedMotion"auto" | "always" | "never""auto"—Respect prefers-reduced-motion.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  className="..."
  duration={500}
  mode="system"
  onChange="light"
  reducedMotion="auto"
/>
classNamedurationmodeonChangereducedMotion

Usage

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

// Basic usage
<ThemeToggler />

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

// Custom duration
<ThemeToggler duration={800} />