Temas e modos

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

Nesta página

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

data-mode

data-density

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.

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.