Thème

Vos pages ressemblent à votre site web. Aucune configuration. <FloconPage /> suit votre thème shadcn. Rien à importer.

Le CSS par défaut est dans le composant. C'est du CSS simple, limité à .flocon-page. Il n'a pas besoin de Tailwind.

Comment ça marche

Chaque variable --flocon-* prend d'abord votre variable shadcn. Si elle n'existe pas, elle prend une valeur Flocon.

.flocon-page {
--flocon-primary: var(--primary, #2f5bd8);
}

Les règles de la page utilisent seulement les variables --flocon-*.

Les variables

• --flocon-primary : depuis --primary. Utilisée pour les liens.
• --flocon-background : depuis --background.
• --flocon-foreground : depuis --foreground. Couleur du texte.
• --flocon-card : depuis --card. Éléments de FAQ.
• --flocon-muted : depuis --muted. Code et en-têtes de tableau.
• --flocon-muted-foreground : depuis --muted-foreground. Description et texte secondaire.
• --flocon-border : depuis --border.
• --flocon-radius : depuis --radius.
• --flocon-font : depuis --font-sans.

Mode sombre

Rien à faire. shadcn change ses variables sous .dark, et la page suit.

Surcharger le CSS

Définissez une variable --flocon-* sur .flocon-page :

.flocon-page {
--flocon-primary: #e11d48;
--flocon-radius: 4px;
}

Tout le CSS par défaut est dans @layer flocon. Votre CSS qui n'est pas dans un layer gagne. Vous pouvez donc aussi restyler un élément :

.flocon-page h1 {
font-size: 3rem;
}

Mis à jour 31 octobre 2026