Temas

Oscuro, claro y sistema

Oscuro es el valor por defecto. data-theme="light" cambia a claro, y system sigue al sistema operativo.

<html data-theme="dark">   <!-- default -->
<html data-theme="light">
<html data-theme="system"> <!-- follows prefers-color-scheme -->

Un área en el otro tema

Cualquier elemento con data-theme recibe los valores de ese tema, así una tarjeta oscura puede estar en una página clara.

Tu marca

Pasa una marca a ThemeProvider: acento, radio, densidad y fuentes. Los colores fuertes, sutiles y de foco se mezclan a partir de tu acento para cada tema. Pruébalo:

<ThemeProvider brand={{}}>
  <App />
</ThemeProvider>

O reemplaza los tokens semánticos en CSS después de la hoja de estilos. Los componentes solo leen tokens semánticos, así que con esto basta para cambiar su marca.

:root, [data-theme='dark'] {
  --alea-accent: #4f8cff;
  --alea-accent-strong: #4f8cff;
  --alea-focus: #4f8cff;
  --alea-gradient-accent-linear: linear-gradient(120deg, #4f8cff, #22d3ee);
}
[data-theme='light'] {
  --alea-accent-strong: #1d4ed8;
  --alea-focus: #1d4ed8;
}

Presets: Graphite

Un preset es un estilo completo sobre los tokens. Graphite es monocromo: casi negro y blanco, superficies grises, acento blanco y títulos sans, el estilo de la mayoría de los sitios bento. Aplícalo a la app, o a cualquier contenedor con data-preset.

<ThemeProvider preset="graphite">…</ThemeProvider>

// or one area
<section data-preset="graphite">…</section>

Superficies: vidrio

surface="glass" convierte las superficies flotantes (navbar, popovers, menús, diálogos, toasts, drawers) en vidrio esmerilado, y Card tiene variant="glass". Sin backdrop-filter vuelven a ser sólidas; con prefers-reduced-transparency quedan casi opacas. El vidrio líquido con refracción está en Alea Pro.

<ThemeProvider surface="glass">…</ThemeProvider>
<Card variant="glass">…</Card>

/* tune it */
:root { --alea-glass-blur: 24px; --alea-glass-saturate: 180%; }

Movimiento

ThemeProvider también acepta motion: el modo, el ajuste de movimiento reducido, la velocidad, la intensidad y valores por defecto por componente. Ver Movimiento.

Enrutamiento

Dale a ThemeProvider la función navigate de tu router. Cada enlace del kit (Link, Breadcrumbs, menús, Tabs, SidebarLink, NavigationMenu) navega entonces en el cliente en lugar de recargar la página.

// React Router
const navigate = useNavigate();
<ThemeProvider navigate={navigate} useHref={useHref}>…</ThemeProvider>

// Next.js (app router)
const router = useRouter();
<ThemeProvider navigate={router.push}>…</ThemeProvider>

En JavaScript

import { tokens, cssVar } from '@alea/tokens';

tokens['accent.default'].dark; // '#cd57ff'
cssVar('surface.default');     // 'var(--alea-surface)'