# Themen und Modi

Theme, Mode, Dichte und Bewegung: vier Attribute, die auf jedem Element angewendet werden und alles darin betreffen.

## Vier Attribute

Theme, Mode, Dichte und Bewegung werden als Attribute auf jedem Element ausgewählt und wirken auf alles darin. Wenn einer sich ändert, wechseln alle gemeinsam über.

Attribut

Werte

Zum Zweck

`data-theme`

`"casa"` oder eine Fassade

Welche Farben die Rollen füllen. Ohne es das Home-Theme.

`data-mode`

`"light"`, `"dark"`

Führt Tag oder Nacht ein. Ohne es folgt dem System.

`data-density`

`"compact"`

Dichtet Zellen und Steuerelemente für Arbeitsbildschirme.

`data-motion`

`"direct"`

Schaltet Übergänge in einem Bereich zum Ziehen oder Zeichnen aus.

## Probieren Sie es

**Schedules**

Wöchentlicher Backup

Sonntag, 3 Uhr

Pflanzen gießen

Montag, 9 Uhr

Neuer TerminplanFiltern

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

## Erscheinungsbild

Das Heim-Erscheinungsbild kommt zum Einsatz. Eine Fassade ist ein weiterer Token-Datei, mit denselben Farbrollen:

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

Der Grund und die Regeln sind in [Das Heim und die Fassaden](/de/design/temas/).

## Modus

Ohne `data-mode` folgt Feitio dem System (`prefers-color-scheme`). Um die Wahl der Person zu erhalten, wenden Sie das Attribut vor dem Malen der Seite in einem kleinen Skript im `<head>` an; sonst blinkt die Seite im System-Modus bevor sie umschaltet.

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

## Dichte

`data-density="compact"` auf dem Arbeitsbereich, nicht auf der ganzen Seite: das Lesen bleibt bequem daneben.

## Bewegung

Das Basis-CSS übernimmt bereits jeden Zustandwechsel und stoppt alles mit dem reduzierten Bewegung des Systems. `data-motion="direct"` schaltet Übergänge nur dort aus, wo sie im Weg wären: Ziehen, Zeichnen, Größeneinstellung.