Perche la personalizzazione del tema e importante
Un pannello admin con il branding di default comunica una cosa sola al cliente: "questo e un prodotto generico". Personalizzare colori, font e logo trasforma la percezione: il pannello diventa il suo strumento, costruito su misura per la sua azienda. Come sviluppatore freelance, questa personalizzazione e uno dei tocchi che fanno la differenza tra un lavoro percepito come artigianale e uno percepito come industriale.
La buona notizia e che Filament 5 rende la personalizzazione del tema semplice e veloce. Non serve riscrivere il CSS, non serve ricompilare gli asset e non serve avere competenze di design. Con poche righe di configurazione nel PanelProvider si ottiene un pannello che rispecchia l identita visiva del cliente.
Personalizzazione base: colori, font e logo
Filament 5 usa CSS custom properties per gestire colori, font e spacing. Questo significa che cambiare il tema non richiede la ricompilazione di file CSS o la generazione di build Tailwind custom. Tutto si configura via PHP nel PanelProvider.
Colori primari e di accento
Il metodo colors() nel PanelProvider permette di definire la palette colori del pannello. Si specificano i colori primari, di successo, di warning e di pericolo, e Filament genera automaticamente tutte le sfumature necessarie per hover, focus, background e testo. Un singolo colore primario produce un intera palette coerente.
Il supporto per i colori e flessibile: si possono usare valori esadecimali, valori RGB o i colori predefiniti di Tailwind. Per la maggior parte dei progetti, basta prendere il colore primario dal brand del cliente e lasciare che Filament faccia il resto.
Font personalizzato
Il metodo font() permette di cambiare il font del pannello con una singola riga. Filament supporta qualsiasi Google Font e font locali. Se il brand del cliente usa un font specifico — cosa comune nei progetti enterprise — si configura in 30 secondi.
Attenzione alla leggibilita: un pannello admin e uno strumento di lavoro, non una brochure. Font decorativi o troppo sottili rendono le tabelle e i form difficili da leggere. Inter, Source Sans Pro e IBM Plex Sans sono scelte sicure che funzionano bene nelle interfacce admin.
Logo e favicon
Il logo si sostituisce con il metodo brandLogo() e il metodo favicon(). Si puo specificare un logo diverso per la dark mode con darkModeBrandLogo(). Il logo appare nella sidebar e nella pagina di login, trasformando immediatamente l aspetto del pannello.
Personalizzazione intermedia: sidebar, navigazione e layout
Oltre a colori e logo, Filament offre controllo granulare sulla struttura della navigazione e del layout.
- Ordine delle voci nel menu — ogni Resource e pagina definisce il proprio
navigationSortper controllare l ordine nella sidebar - Gruppi di navigazione — le voci possono essere raggruppate sotto label collassabili, utile per pannelli con molte risorse
- Icone custom — ogni voce di menu puo avere un icona da Heroicons o da qualsiasi set di icone SVG custom
- Badge di notifica — ogni voce puo mostrare un badge con un contatore (es. numero di ordini in attesa) che si aggiorna in tempo reale
- Top navigation — in alternativa alla sidebar, Filament supporta una navigazione orizzontale in alto, utile per pannelli con poche voci
- Sidebar collapsabile — la sidebar si puo collassare a icone per dare piu spazio al contenuto, con toggle manuale o automatico su schermi piccoli
Dark mode: configurazione e best practice
Filament supporta la dark mode con un toggle integrato nell interfaccia. L utente sceglie tra tema chiaro, tema scuro o automatico (segue le impostazioni del sistema operativo). Non serve configurare nulla: la dark mode funziona out of the box con tutti i componenti e i plugin.
L unica attenzione riguarda il logo e le immagini custom: assicurarsi che funzionino bene su entrambi gli sfondi. Un logo con sfondo bianco sparisce in modalita chiara, e un logo scuro diventa invisibile in dark mode. Usare sempre loghi con trasparenza e colori che contrastano su entrambi gli sfondi.
Personalizzazione avanzata: pubblicare e modificare le view Blade
Per personalizzazioni che vanno oltre colori e configurazioni — layout della sidebar diverso, header custom con informazioni aggiuntive, footer con link specifici — Filament permette di pubblicare le view Blade specifiche e modificarle.
Il comando php artisan vendor:publish con il tag appropriato esporta le view nella directory resources/views/vendor/filament. Da li si modificano come qualsiasi view Blade, mantenendo accesso a tutti i componenti e le variabili del framework.
La regola d oro e: pubblicare solo le view che si devono modificare. Meno view pubblicate significa meno codice da mantenere quando Filament viene aggiornato. Se una personalizzazione si puo fare via PanelProvider, sempre meglio farla li piuttosto che pubblicare una view.
Render hooks: iniettare contenuto senza pubblicare view
Filament offre render hooks che permettono di iniettare HTML in punti specifici del layout senza pubblicare le view. Si possono aggiungere script, banner, widget o qualsiasi contenuto custom nell header, nel footer, nella sidebar o nella pagina di login. I render hooks sono il compromesso ideale tra personalizzazione e manutenibilita.
Creare un tema Filament riutilizzabile
Se si lavora su piu progetti con lo stesso stile — ad esempio tutti i progetti di un agenzia — ha senso creare un pacchetto tema riutilizzabile. Filament supporta i temi come plugin: si crea un pacchetto Composer con le configurazioni, i colori, il logo e le view personalizzate, e lo si installa in ogni progetto con un singolo comando.
Il tema riutilizzabile centralizza le personalizzazioni: quando si aggiorna il branding dell agenzia, si aggiorna il pacchetto e tutti i progetti lo ricevono con composer update. Nessuna duplicazione, nessun copia-incolla tra progetti.
Il risultato: un pannello admin che sembra fatto su misura
Con 30 minuti di personalizzazione — colori del brand, logo, font, ordine delle voci — il pannello Filament diventa irriconoscibile rispetto al default. Il cliente non vede un framework generico: vede il suo strumento, con i suoi colori e il suo logo.
Questa percezione ha un impatto diretto sul valore percepito del lavoro. Un pannello con branding personalizzato comunica cura e attenzione al dettaglio. Il cliente e piu soddisfatto, piu propenso a raccomandare il lavoro e meno incline a cercare alternative. Il 5% di sforzo in piu sulla personalizzazione visiva si ripaga ampiamente in termini di relazione con il cliente e reputazione professionale.
E il bello e che con Filament 5, quel 5% di sforzo e letteralmente 5% del tempo: poche righe nel PanelProvider, un logo e un colore. Il framework fa tutto il resto.