Configuration globale des couleurs CSS dans Filament PHP v3

Bonjour à tous, voici mon premier article sur ce blog, et vous pouvez vous attendre à d'autres de ma part !

Je vais vous donner quelques conseils sur la manière d'utiliser FLAT Stack et d'autres technologies pour développer des applications web et mobiles, alors restez à l'écoute.

Comme nous le savons tous, Filament v3 a introduit le concept de panneaux multiples, mais il a également proposé une nouvelle façon de configurer les couleurs CSS pour l'identité visuelle (ce qui marque une rupture par rapport à l'approche Tailwind CSS utilisée dans la v2).

Cette nouvelle approche est sympa, mais cela signifie aussi que vous devrez configurer les couleurs de votre identité visuelle pour chaque panneau que vous créez... ou peut-être pas ?

Après avoir longuement examiné le code source, j'ai découvert que Filament finissait par appeler la s'inscrire méthode de Couleur du filament l'interface après le démarrage du panneau, lorsque vous configurez les couleurs dans votre fournisseur de services de panneau, par exemple :

...
->colors([
    'white' => Color::hex('#ffffff'),
    'black' => Color::hex('#212121'),
    'danger' => Color::hex('#f93232'),
    'gray' => Color::hex('#8a8894'),
   'info' => Color::hex('#00a3ff'),
    'primary' => Color::hex('#00a3ff'),
    'success' => Color::hex('#439f6e'),
    'warning' => Color::hex('#ffb82e'),
])
...

Cela signifie donc que nous pouvons déplacer la configuration des couleurs vers le Fournisseur de services d'applications et le configurer une fois pour tous les panneaux :

use Illuminate\Support\ServiceProvider;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // ...

        FilamentColor::register([
            'white' => Color::hex('#ffffff'),
            'black' => Color::hex('#212121'),
            'danger' => Color::hex('#f93232'),
            'gray' => Color::hex('#8a8894'),
            'info' => Color::hex('#00a3ff'),
            'primary' => Color::hex('#00a3ff'),
            'success' => Color::hex('#439f6e'),
            'warning' => Color::hex('#ffb82e'),
        ]);

        // ...
    }
}

Cette approche vous permet également de personnaliser les couleurs de chaque panneau si nécessaire.

C'est tout pour l'instant, à bientôt dans le prochain article !