# Color modes and themes

Switch between light, dark and high contrast with one attribute, or make a look of your own.

Same markup, one attribute. Set `data-theme` on `<html>`, or on any element to scope a mode to it.

### 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](https://nandovejer.github.io/luz/docs/tokens/modes/#switching), 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](https://nandovejer.github.io/luz/docs/tokens/themes/): copy the template, change what you need, and check it.

Mode examples
```html
<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](https://nandovejer.github.io/luz/docs/tokens/contrast/).

### 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](https://nandovejer.github.io/luz/docs/components/theme-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](https://nandovejer.github.io/luz/docs/catalog/theme-time/), in the catalog: adds the time of day as a choice, in moments you declare, with an optional slider of the 24 hours.

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