# Themes and modes

Theme, mode, density and motion: four attributes, on any element, that apply to everything inside.

## Four attributes

Theme, mode, density and motion are picked by attribute, on any element, and apply to everything inside it. When one changes, everything transitions together.

Attribute

Values

What for

`data-theme`

`"casa"` or a facade

Which colors fill the roles. Without it, the home theme.

`data-mode`

`"light"`, `"dark"`

Forces day or night. Without it, follows the system.

`data-density`

`"compact"`

Tightens cells and controls for work screens.

`data-motion`

`"direct"`

Turns transitions off in a dragging or drawing area.

## Try it

**Schedules**

Weekly backup

Sunday, 3 am

Water the plants

Tuesday, 9 am

New scheduleFilters

```html
<div data-theme="casa">…</div>
```

## Theme

The home theme comes on. A facade is another token file, with the same color roles:

```shell
tokens/themes/horta.light.tokens.json   # os papéis de cor da fachada
bun run build                           # gera o CSS do tema
bun run check                           # o contraste precisa passar
```

```html
<html lang="pt-BR" data-theme="horta">
```

The why and the rules are in [The home and the facades](/en/design/temas/).

## Mode

Without `data-mode`, Feitio follows the system (`prefers-color-scheme`). To keep the person’s choice, apply the attribute before the page paints, in a small script in the `<head>`; otherwise the page flashes in the system mode before switching.

```html
<script>
  const mode = localStorage.getItem('feitio-mode');
  if (mode) document.documentElement.dataset.mode = mode;
</script>
```

## Density

`data-density="compact"` on the work area, not on the whole page: reading stays comfortable next to it.

## Motion

The base CSS already transitions every change of state and stops everything with the system’s reduced motion. `data-motion="direct"` turns transitions off only where they would get in the way: dragging, drawing, resizing.