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