'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Extras
ThemeProvider e interruptor
Oscuro, claro o del sistema, recordado, con un interruptor en dos estilos.
import { ThemeProvider, ThemeToggle, useTheme } from '@alea/ui';
Ejemplos
Interruptor de tema
Un botón de ícono que cambia entre oscuro y claro, o un control segmentado con system.
Picked: dark · showing: dark
Provider
Envuelve la app una vez. scope="element" aplica el tema a un área en lugar de la página.
Always light
This area has its own provider.
Props
ThemeProvider props
Pone los tokens de Alea en modo oscuro, claro o del sistema y comparte la elección.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
brand | BrandTheme | - | Cambios de marca: color de acento, radio, densidad, fuentes. |
className | string | - | Clases para el contenedor (scope="element"). |
contrast | "normal" | "system" | "more" | 'system' | system (por defecto) sube el contraste cuando el dispositivo lo pide; more siempre lo sube a WCAG AAA (texto a 7:1, bordes más fuertes); normal nunca lo hace. |
defaultTheme | "dark" | "light" | "system" | 'dark' | Tema al inicio cuando no hay nada guardado. Por defecto oscuro. |
locale | string | - | Un locale BCP 47 ("es-ES", "pt-BR"): las fechas, números, calendarios y etiquetas incluidas lo siguen. Por defecto el del navegador. |
motion | MotionConfig | - | Movimiento para todo lo de abajo: mode (expressive, productive, reduced, off), reduced (system, always, never), speed, intensity, y valores por defecto por componente. |
navigate | ((path: string, options?: any) => void) | - | La función navigate de tu router (useNavigate() de React Router, router.push de Next): los enlaces del kit navegan sin recargar. |
onThemeChange | ((theme: "dark" | "light" | "system") => void) | - | Se llama con el nuevo tema cuando cambia. |
preset | "default" | "graphite" | 'default' | Un estilo sobre los tokens: "graphite" es monocromo (casi negro y blanco, superficies grises, títulos sans), pensado para diseños bento. |
scope | "document" | "element" | 'document' | Dónde va data-theme: la raíz del documento (por defecto) o un div contenedor. |
storageKey | string | null | 'alea-theme' | Clave de localStorage para recordar la elección; pasa null para no guardarla. |
strings | Partial<AleaStrings> | - | Cambia cualquier texto que escribe el kit (etiquetas, placeholders, anuncios), sobre el paquete del idioma (incluye inglés y español). |
surface | "glass" | "solid" | 'solid' | "glass" convierte las superficies flotantes (navbar, popovers, menús, diálogos, toasts, drawers) en vidrio esmerilado. |
theme | "dark" | "light" | "system" | - | Tema controlado. |
useHref | ((href: string) => string) | - | El useHref de tu router, para routers con una ruta base. |
ThemeToggle props
Cambia el tema (necesita ThemeProvider para system y para guardarlo).
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
appearance | "icon" | "segmented" | 'icon' | icon: un botón que alterna oscuro/claro; segmented: oscuro, claro, sistema. |
className | string | - | Clases extra. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
ThemeProvider
- Variantes
contrastnormalsystemmoredefaultThemedarklightsystempresetdefaultgraphitescopedocumentelementsurfaceglasssolidthemedarklightsystem- Motion
- Acepta una prop motion para su entrada y salida.
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-theme
ThemeToggle
- Variantes
appearanceiconsegmented- Motion
- glidepress
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-theme-toggle.alea-segmented.alea-segmented-item
Accesibilidad
- ThemeToggle es un botón nombrado con el tema al que cambia; el aspecto segmentado es un grupo de radios con el tema actual marcado.
- Ambos temas cumplen el contraste AA, y el modo de alto contraste sigue la configuración del sistema.
- La elección se recuerda, así quien necesita un tema lo conserva.
Teclado
| Tecla | Acción |
|---|---|
| Enter o Espacio | Cambia el tema |
Qué hacer y qué evitar
Hacer
- Pon ThemeProvider una sola vez cerca de la raíz.
- Respeta system como valor por defecto.
Evitar
- No pongas colores fijos: usa los tokens para que ambos temas funcionen.
- No escondas el interruptor en móvil.