Themen und Modi

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

Auf dieser Seite

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

data-mode

data-density

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.

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.