Thèmes et variantes

Une variante est une peau complète au-dessus du même modèle de données. Elle peut changer la composition, les animations et les composants, mais pas supprimer silencieusement une capacité partagée.

Les six expériences

Ouvrez le preview interactif en direct pour comparer les mêmes articles avec des réglages partageables, ou lancez bun run preview:all pour valider des changements source locaux.

Dans organique, maintenez un nœud du Knowledge Graph pour le déplacer. Les liens issus des tags suivent sa position en direct ; le nœud actif, ses voisins et les relations non concernées prennent des états visuels distincts. La lueur de pointeur et le graphe utilisent l’accent courant et réagissent au thème clair ou sombre.

Vitrines d’accueil

Chaque variante publique s’ouvre désormais sur une vitrine bilingue orientée profil avant son flux éditorial. Motion Primitives, Cult UI, Aceternity, ReactBits et Organique adaptent le composant partagé DemoProfileHero ; H4X0R conserve un ProfileHero natif conçu pour son terminal HUD. Le contrat d’information reste aligné tandis que la composition, les animations et les contrôles appartiennent à chaque variante.

Organique présente aussi deux surfaces bilingues additives : /certifications avec une série de trois articles de certification, et /friends avec un blogroll local. Leurs miroirs anglais se trouvent à /en/certifications et /en/friends. Les articles de certification restent dans shared/content/blog/<locale>/, donc toutes les variantes les rendent même si les deux pages de vitrine sont spécifiques à Organique.

Tokens CSS

Le thème utilise des variables sémantiques :

1
:root {
2
  --background: oklch(1 0 0);
3
  --foreground: oklch(0.145 0 0);
4
  --accent: oklch(0.527 0.154 150.1);
5
  --border: oklch(0.922 0 0);
6
}
7

8
.dark {
9
  --background: oklch(0 0 0);
10
  --foreground: oklch(0.985 0 0);
11
}

Modifiez les rôles, pas les occurrences. Un composant utilise var(--color-muted-foreground), jamais une couleur grise arbitraire.

Accent lecteur

Le sélecteur d’accent stocke une couleur dans localStorage et vérifie son contraste en clair et sombre. La valeur site.accent de lisible.config.json reste le repli initial.

Cycle de vie de l’apparence

Chaque layout monte le composant partagé AppearanceBootstrap.astro avant que la page devienne visible. Il résout le mode système/clair/sombre, applique un accent accessible, réagit aux changements du système et des autres onglets, puis réapplique le même état après les swaps Astro. Le thème et l’accent restent ainsi stables sans flash du mauvais thème, y compris dans le previewer en direct.

Impression et PDF

shared/print.css est importé en dernier par chaque variante, il prime donc sur le style de la variante. À l’impression, l’habillage, la navigation et la décoration disparaissent, le rendu repasse en encre sur papier quel que soit le thème actif, la destination des liens externes est écrite en toutes lettres, et les titres, tableaux et blocs de code ne se coupent pas entre deux pages. Un blog pensé pour la lecture doit survivre à l’impression.

Contrat d’une variante

• mêmes routes communes de référence et même frontmatter ;
• routes additives d’une variante toujours bilingues, accessibles et sans remplacement du socle ;
• dictionnaires FR/EN complets ;
• focus visible et clavier ;
• prefers-reduced-motion respecté ;
• réinitialisation sur astro:page-load ;
• même comportement des flags.

Références

• Styles et CSS dans Astro
• Tailwind avec Astro