# Temas e modos

Tema, modo, densidade e movimento: quatro atributos, em qualquer elemento, que valem para tudo dentro dele.

## Quatro atributos

Tema, modo, densidade e movimento se escolhem por atributo, em qualquer elemento, e valem para tudo o que está dentro dele. Quando um muda, tudo transiciona junto.

Atributo

Valores

Para quê

`data-theme`

`"casa"` ou uma fachada

Quais cores preenchem os papéis. Sem ele, a casa.

`data-mode`

`"light"`, `"dark"`

Força o dia ou a noite. Sem ele, segue o sistema.

`data-density`

`"compact"`

Aperta células e controles para telas de trabalho.

`data-motion`

`"direct"`

Desliga a transição numa área de arrastar ou desenhar.

## Experimente

**Agendamentos**

Backup semanal

Domingo, 3h

Regar as plantas

Terça, 9h

Novo agendamentoFiltros

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

## Tema

A casa vem ligada. Uma fachada é outro arquivo de tokens, com os mesmos papéis de cor:

```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">
```

O porquê e as regras estão em [A casa e as fachadas](/pt/design/temas/).

## Modo

Sem `data-mode`, o Feitio segue o sistema (`prefers-color-scheme`). Para guardar a escolha de quem usa, aplique o atributo antes de pintar a página, num script pequeno no `<head>`; senão, a página pisca no modo do sistema antes de trocar.

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

## Densidade

`data-density="compact"` na área de trabalho, não na página inteira: a leitura continua confortável ao lado.

## Movimento

O CSS base já transiciona toda mudança de estado e para tudo com o movimento reduzido do sistema. `data-motion="direct"` desliga a transição só onde ela atrapalharia: arrastar, desenhar, redimensionar.