# Temas y modos

Tema, modo, densidad y movimiento: cuatro atributos, en cualquier elemento, que aplican a todo lo que está dentro.

## Cuatro atributos

Tema, modo, densidad y movimiento se seleccionan por atributo, en cualquier elemento, y aplican a todo lo que hay dentro. Cuando uno cambia, todo transiciona junto.

Atributo

Valores

Para qué sirve

`data-theme`

`"casa"` o una fachada

Cuáles colores llenan los roles. Sin él, el tema principal.

`data-mode`

`"light"`, `"dark"`

Fuerza día o noche. Sin él, sigue el sistema.

`data-density`

`"compact"`

Ajusta celdas y controles para pantallas de trabajo.

`data-motion`

`"direct"`

Apaga transiciones en una zona de arrastre o dibujo.

## Pruébalo

**Schedules**

Respaldo semanal

Domingo, 3 am

Regar las plantas

Martes, 9 am

Nueva programaciónFiltros

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

## Tema

El tema de inicio se activa. La fachada es otro archivo de tokens, con los mismos roles de color:

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

Las razones y las reglas están en [El inicio y las fachadas](/es/design/temas/).

## Modo

Sin `data-mode`, Feitio sigue el sistema (`prefers-color-scheme`). Para mantener la elección de la persona, aplique el atributo antes de que la página se pinte, en un pequeño script dentro del `<head>`; de lo contrario, la página parpadea en el modo del sistema antes de cambiar.

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

## Densidad

`data-density="compact"` en el área de trabajo, no en toda la página: la lectura permanece cómoda a su lado.

## Motion

El CSS base ya transiciona cada cambio de estado y detiene todo con la reducción de movimiento del sistema. `data-motion="direct"` desactiva las transiciones solo donde podrían interferir: arrastrar, dibujar, redimensionar.