Stili e temi

I template Pixi’VN costruiscono la UI con shadcn/ui sopra Tailwind CSS. A differenza di una normale libreria di componenti, shadcn/ui non viene distribuita come pacchetto: il codice sorgente dei componenti viene copiato nel tuo progetto (in src/components/ui/).

L'intero tema — colori, arrotondamento, font e altro — dipende da un unico file: src/styles.css.

Oltre il generatore di temi di baseCopia link ancora

Invece di modificare styles.css a mano, puoi generare un tema completo con uno strumento visivo.

Generatore di temi di shadcn/uiCopia link ancora

Il generatore di temi ufficiale è un editor visivo: scegli un colore di base, regoli la palette per la modalità chiara e scura, e imposti il raggio degli angoli, con un'anteprima in tempo reale dei componenti shadcn reali (pulsanti, card, input, ecc.) così puoi vedere il risultato prima di applicare qualsiasi modifica. Una volta che sei soddisfatto del risultato, apri la sezione Copy della pagina: ti fornisce un comando pronto all'uso nella forma:

npx shadcn@latest add <generated-command>

Eseguire questo comando dalla root del tuo progetto scarica il tema generato e sovrascrive con esso le variabili di colore/raggio in styles.css, come descritto in Template → Personalizza lo stile.

Una volta applicato il codice generato al tuo progetto, esegui:

npm run ui:reinit

Questo reinstalla forzatamente ogni componente shadcn già presente nel tuo progetto direttamente dal registro shadcn, utilizzando i tuoi styles.css e components.json aggiornati, e successivamente riformatta i file sorgente. Mantiene tutti i componenti coerenti con il nuovo tema, invece di lasciarli con qualsiasi variabile con cui erano stati creati.

tweakcnCopia link ancora

tweakcn è un'alternativa creata dalla community al generatore di temi ufficiale. Copre gli stessi colori e raggio, ma aggiunge anche la modifica in tempo reale di font e ombre, e include una galleria di preset pronti all'uso da cui partire invece di costruire una palette da zero. Esporta inoltre il risultato come variabili CSS, quindi incolli l'output in styles.css allo stesso modo, e puoi farlo seguire da npm run ui:reinit.

Questi due sono i generatori di temi più utilizzati con shadcn/ui oggi. Se ne incontri altri, l'importante è che generino semplici variabili CSS (o un comando del registro shadcn) — qualsiasi cosa in questo formato si inserisce in styles.css allo stesso modo.