Styles et thème

Les templates Pixi’VN construisent l'UI avec shadcn/ui par-dessus Tailwind CSS. Contrairement à une bibliothèque de composants classique, shadcn/ui n'est pas distribué sous forme de package : le code source des composants est copié directement dans votre propre projet (sous src/components/ui/).

L'ensemble du thème — couleurs, arrondi, polices, et plus encore — dépend d'un seul fichier : src/styles.css.

Au-delà du générateur de thème de baseCopier le lien d'ancre

Plutôt que de modifier styles.css à la main, vous pouvez générer un thème complet avec un outil visuel.

Générateur de thème shadcn/uiCopier le lien d'ancre

Le générateur de thème officiel est un éditeur visuel : vous choisissez une couleur de base, ajustez la palette pour le mode clair et sombre, et définissez le rayon des coins, avec un aperçu en direct de vrais composants shadcn (boutons, cartes, champs de saisie, etc.) afin que vous puissiez voir le résultat avant d'appliquer quoi que ce soit. Une fois que le résultat vous convient, ouvrez la section Copy de la page : elle vous fournit une commande prête à l'emploi sous la forme :

npx shadcn@latest add <generated-command>

Exécuter cette commande depuis la racine de votre projet récupère votre thème généré et écrase les variables de couleur/rayon dans styles.css avec celui-ci, comme décrit dans Modèles → Personnaliser le style.

Une fois ce code généré appliqué à votre projet, exécutez :

npm run ui:reinit

Cela réinstalle de force chaque composant shadcn déjà présent dans votre projet directement depuis le registre shadcn, en utilisant vos fichiers styles.css et components.json mis à jour, puis reformate les fichiers source par la suite. Cela garde tous les composants cohérents avec le nouveau thème, au lieu de les laisser sur les variables avec lesquelles ils ont été construits.

tweakcnCopier le lien d'ancre

tweakcn est une alternative communautaire au générateur de thème officiel. Il couvre les mêmes couleurs et le même rayon, mais ajoute également l'édition en direct des polices et des ombres, et propose une galerie de préréglages prêts à l'emploi à partir desquels vous pouvez démarrer au lieu de créer une palette à partir de zéro. Il exporte également son résultat sous forme de variables CSS, vous pouvez donc coller le résultat dans styles.css de la même manière, puis enchaîner avec npm run ui:reinit.

Ce sont aujourd'hui les deux générateurs de thème les plus utilisés avec shadcn/ui. Si vous en rencontrez d'autres, l'important est qu'ils produisent de simples variables CSS (ou une commande du registre shadcn) — tout ce qui respecte ce format s'intègre dans styles.css de la même manière.