CompositionAvailable

Theme Toggle

A direct light/dark button with a sun or moon reflecting the current theme.

Light / Dark · One click

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/theme-toggle.json

Usage

Import the component into your project and keep the source code under your control.

tsx

"use client";
import { ThemeToggle } from "@/components/ui/theme-toggle";
export default function Demo() {
  return <div className="flex items-center gap-4 rounded-lg border border-ink bg-card p-6 text-card-foreground">
    <span>Light / Dark · One click</span><ThemeToggle />
  </div>;
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
locale	en \| es	en	Accessible button labels.
className	string	—	Optional trigger classes. Requires ThemeProvider.

Accessibility

Rules that should remain intact when adapting the component to a product.

Visible focus and keyboard activation. The accessible label describes the next action; the icon reflects the resolved theme, including the initial system preference.