Brickslab.Tools

@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

Prop	Type	Défaut	Requis	Description
`className`	`string`	—	—	Additional CSS class.
`mode`	`"light" \| "dark" \| "system"`	`"system"`	—	Initial theme mode.
`label`	`string`	—	—	Custom label text. Defaults to mode name.
`onChange`	`(mode: "light" \| "dark" \| "system") => void`	—	—	Callback when mode changes.

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="..."
  mode="system"
  label="..."
  onChange="light"
/>

classNamemodelabelonChange

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