CompositionDisponible

Theme Provider

Temas claro, oscuro y del sistema con persistencia, inicio sin destello y sincronización entre pestañas.

Loading theme…

The catalog supplies one ThemeProvider at its root.

Loading example…

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-provider.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

"use client";
import { useTheme } from "@/components/ui/theme-provider";
import { ThemeToggle } from "@/components/ui/theme-toggle";
export default function Demo() {
  const { ready, theme, resolvedTheme } = useTheme();
  return <div className="grid gap-4 rounded-lg border border-ink bg-card p-6 text-card-foreground">
    <p>{ready ? `${theme} → ${resolvedTheme}` : "Loading theme…"}</p>
    <ThemeToggle />
    <p className="text-sm text-muted-foreground">The catalog supplies one ThemeProvider at its root.</p>
  </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
storageKey	string	brutallab:theme	Storage namespace; match the head initializer.
defaultTheme	light \| dark \| system	system	Used without a valid saved preference.
useTheme()	theme, resolvedTheme, ready, setTheme	—	Access theme state under a single document-level provider.
getThemeInitScript(key, defaultTheme)	string	—	Import from lib/theme and insert in the document head before styles; allow it with your CSP nonce/hash.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Foco visible, etiquetas accesibles, estado seleccionado y preferencia del sistema. Sin animación de cambio de tema.