Thème

Changez l'apparence avec des variables CSS. <FloconPage /> a un CSS par défaut intégré. Rien à importer.

Le CSS est du CSS simple dans @layer flocon, limité à .flocon-page. Il n'a pas besoin de Tailwind.

Les variables

Surchargez n'importe laquelle sur .flocon-page :

  • --flocon-primary : liens.
  • --flocon-background
  • --flocon-foreground : couleur du texte.
  • --flocon-card : éléments de FAQ.
  • --flocon-muted : code et en-têtes de tableau.
  • --flocon-muted-foreground : description et texte secondaire.
  • --flocon-border
  • --flocon-radius
  • --flocon-font
.flocon-page {
--flocon-primary: #e11d48;
--flocon-radius: 4px;
}

Styler les noms de classes

Votre CSS qui n'est pas dans un layer gagne sur le CSS par défaut. Vous pouvez donc restyler un élément avec les noms de classes, comme flocon-page, flocon-faq ou flocon-table :

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

Mode sombre

Rien à faire. Les couleurs du texte, du texte atténué et des bordures suivent la couleur de votre texte (currentColor). Les modes clair et sombre marchent sans configuration.

Le package Astro ne détecte ni shadcn ni Tailwind. Définissez vous-même les variables --flocon-*.

Mis à jour