ThemeToggle
Selector de apariencia claro, oscuro o automático; guarda la elección en el navegador, sin next-themes.
Usar
import { ThemeToggle } from "@unozero-ai/ui/react";
<ThemeToggle></ThemeToggle>Antes de usarlo
ThemeToggle ya no necesita next-themes ni un ThemeProvider: pone o quita la clase dark en <html> (de ella cuelgan los tokens oscuros del kit), fija color-scheme y guarda la elección en localStorage con la clave theme y los valores light, dark y system, los mismos que next-themes. Aplica el tema al montarse; para que la primera pintura no salga clara y luego se oscurezca, pon este script en el <head> del layout, con suppressHydrationWarning en <html>. Si tu app ya monta next-themes, su proveedor hace lo mismo y puede quedarse, pero useTheme no se entera de lo que elijas aquí hasta recargar. Cómo se arma el tema completo está en Tema claro y oscuro.
// Antes de pintar: el tema guardado o, si no hay, el del sistema.
const theme = `try {
const t = localStorage.getItem("theme");
const dark = t === "dark" || (t !== "light" && matchMedia("(prefers-color-scheme: dark)").matches);
document.documentElement.classList.toggle("dark", dark);
document.documentElement.style.colorScheme = dark ? "dark" : "light";
} catch {}`;
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="es" suppressHydrationWarning>
<head>
<script dangerouslySetInnerHTML={{ __html: theme }} />
</head>
<body>{children}</body>
</html>
);
}Básico
Claro, oscuro y automático. Es un control segmentado y no un interruptor a propósito: un interruptor solo puede caer en claro u oscuro, y el primer clic perdería «Automático», que es con lo que arranca la app. La demo cambia el tema de la página entera, y los tres selectores de esta ficha se mueven juntos. Con el teclado, Tab entra en la opción activa y las flechas, Inicio y Fin cambian de opción.
En ajustes
Su sitio natural es la página de preferencias, con una línea que explique qué hace «Automático». La elección vive en el localStorage del navegador, no en la cuenta del usuario. Para guardarla también en la cuenta, escucha onChange y lee value: llega con la clase y el almacenamiento ya escritos.
Apariencia
Automático sigue la configuración de tu dispositivo. Se guarda en este navegador.
En la barra superior
Si el cambio de tema se usa a menudo (recepciones con turno de noche, por ejemplo), súbelo a la barra, junto al usuario. Sus botones de 28 px caben en la barra móvil de 56 px.
Hotel Casa Mar · Recepción
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).