CompositionDisponible
Theme Toggle
Botón directo para alternar claro y oscuro, con sol o luna según el tema actual.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/theme-toggle.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu 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>;
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| locale | en | es | en | Accessible button labels. |
| className | string | — | Optional trigger classes. Requires ThemeProvider. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Foco visible y activación por teclado. La etiqueta indica el próximo cambio; el icono refleja el tema actual, incluida la preferencia inicial del sistema.