Color modes and themes

Modes and themes

A color mode changes how light or dark the page is; a theme changes its whole identity. LUZ ships one look, in three modes. A theme of your own sits on top of it.

• The three modes ship with the tokens: data-theme="light", "dark" and "high-contrast". With no mode named, the page follows the device: dark when the system is dark, high contrast when it asks for more contrast, light otherwise. Let readers choose, or name a mode and it wins. To keep a page light, put data-theme="light" on <html>.
• The default look is Vejer, inspired by Vejer de la Frontera. It is the value the tokens have, not a file you load: ET Book for running text and headings, whitewash and sandstone surfaces, iron-black text, sky-blue links and actions, and every link underlined.
• LUZ ships no theme file. Make your own: copy the template, change what you need, and check it.

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

Every mode is measured against the same minimums: 4.5:1 for text, 3:1 for disabled text, borders and focus rings. The same measure runs on a theme of your own with npx @luz-ds/tokens@0.3.0 check-contrast, or in the browser with the contrast check.

Letting readers choose

A page follows the system until it says otherwise: with no data-theme or data-mode on <html>, the page follows the device's dark and high contrast settings, with no script. Two elements let a reader choose, or pick a time of day.

• Color mode, in core: a button that steps through Auto, light, dark and high contrast, and an optional script for the head that applies the stored or system mode before the first paint.
• Color mode by time of day, in the catalog: adds the time of day as a choice, in moments you declare, with an optional slider of the 24 hours.