BricksLab Catalog

@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

Prop	Type	Défaut	Requis	Description
`className`	`string`	—	—	Additional CSS class.
`duration`	`number`	`500`	—	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.

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} />