# Modos de color y temas

Cambia entre claro, oscuro y alto contraste con un solo atributo, o crea tu propio aspecto.

El mismo marcado, un solo atributo. Define `data-theme` en `<html>` o en cualquier elemento para limitar el modo a ese elemento.

### Modos y temas

Un modo de color cambia la claridad u oscuridad de la página; un tema cambia toda su identidad. LUZ incluye un aspecto en tres modos. Tu propio tema se aplica sobre él.

- Los tokens incluyen los tres modos: `data-theme="light"`, `"dark"` y `"high-contrast"`. Si la página no nombra un modo, sigue al dispositivo: oscuro si el sistema es oscuro, alto contraste si pide más contraste y claro en los demás casos. [Deja que cada persona elija](https://nandovejer.github.io/luz/es/docs/tokens/modes/#switching), o nombra un modo y ese manda. Para que una página siga clara, pon `data-theme="light"` en `<html>`.
- El aspecto predeterminado es Vejer, inspirado en Vejer de la Frontera. Es el valor de los tokens, no un archivo que se carga: ET Book para el texto corrido y los encabezados, superficies blancas y de arenisca, texto negro hierro, enlaces y acciones azul cielo, y todos los enlaces subrayados.
- LUZ no incluye ningún archivo de tema. [Crea el tuyo](https://nandovejer.github.io/luz/es/docs/tokens/themes/): copia la plantilla, cambia lo que necesites y compruébalo.

Mode examples
```html
<html data-theme="dark">
<html data-theme="high-contrast">
<html data-theme="my-brand" data-mode="dark">
```

Todos los modos se evalúan con los mismos mínimos: 4,5:1 para el texto y 3:1 para el texto deshabilitado, los bordes y los anillos de foco. Puedes aplicar la misma comprobación a tu tema con `npx @luz-ds/tokens@0.3.0 check-contrast` o en el navegador con [la comprobación del contraste](https://nandovejer.github.io/luz/es/docs/tokens/contrast/).

### Dejar que cada persona elija

Una página sigue al sistema hasta que se diga otra cosa: sin `data-theme` ni `data-mode` en `<html>`, la página sigue los ajustes de oscuro y de alto contraste del dispositivo, sin script. Dos elementos permiten elegir, o elegir una hora del día.

- [Modo de color](https://nandovejer.github.io/luz/es/docs/components/theme-mode/), en core: un botón que recorre Automático, claro, oscuro y alto contraste, y un script opcional para la cabecera que aplica el modo guardado o del sistema antes del primer pintado.
- [Modo de color según la hora del día](https://nandovejer.github.io/luz/es/docs/catalog/theme-time/), en el catálogo: añade la hora del día como una elección, en los momentos que declares, con un deslizador opcional de las 24 horas.

Values: `tokens.json`, `classes.json`.