Modos de color y temas

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, 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: copia la plantilla, cambia lo que necesites y compruébalo.

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

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, 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, 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.