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.

Sur cette page

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

data-mode

data-density

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.

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.