# Thèmes et modes

Thème, mode, densité et mouvement : quatre attributs, sur n'importe quel élément, qui s'appliquent à tout ce qui se trouve à l'intérieur.

## Quatre attributs

Le thème, le mode, la densité et le mouvement sont sélectionnés par attribut, sur n'importe quel élément, et s'appliquent à tout ce qui se trouve à l'intérieur. Lorsqu'un seul change, tout transition ensemble.

Attribut

Valeurs

Pour quoi

`data-theme`

`"casa"` ou une façade

Les couleurs qui remplissent les rôles. Sans cela, le thème de la maison.

`data-mode`

`"light"`, `"dark"`

Force le jour ou la nuit. Sans cela, il suit le système.

`data-density`

`"compact"`

Rasserre les cellules et contrôle les écrans de travail.

`data-motion`

`"direct"`

Désactive les transitions dans une zone de glisser-déposer ou de dessin.

## Essayez-le

**Schedules**

Sauvegarde hebdomadaire

Dimanche, 3 heures

Arroser les plantes

Mardi, 9 heures

Nouvelle planificationFiltres

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

## Thème

Le thème d'accueil est là. Une façade est un autre fichier de jetons, avec les mêmes rôles de couleurs :

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

Les raisons et les règles se trouvent dans [L'accueil et les façades](/fr/design/temas/).

## Mode

Sans `data-mode`, Feitio suit le système (`prefers-color-scheme`). Pour conserver le choix de la personne, appliquez l'attribut avant que la page ne s'affiche, dans un petit script dans le `<head>` ; sinon, la page clignote en mode système avant de basculer.

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

## Densité

`data-density="compact"` sur la zone de travail, pas sur toute la page : la lecture reste confortable à côté.

## Motion

Le CSS de base transite déjà chaque changement d'état et arrête tout avec le mouvement réduit du système. `data-motion="direct"` désactive les transitions uniquement là où elles gêneraient : glisser-déposer, dessiner, redimensionner.