Filament•2y ago

Primary Color for v3?

Hi guys, I'm trying to set the primary colour for buttons etc on the new v3. When looking at the docs it says you can use an array: https://beta.filamentphp.com/docs/3.x/support/colors But I'm getting an error

Filament\Support\Colors\ColorManager::Filament\Support\Colors\{closure}(): Argument #1 ($color) must be of type string, array given

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Database\Eloquent\Model;
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Disable mass assignment protection. Filament handles this
        Model::unguard();

        FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::hex('#694398'),
            'info' => Color::Blue,
            'primary' => [
                50 => Color::hex('#694398'),
                100 => Color::hex('#694398'),
                200 => Color::hex('#694398'),
                300 => Color::hex('#694398'),
                400 => Color::hex('#694398'),
                500 => Color::hex('#694398'),
                600 => Color::hex('#694398'),
                700 => Color::hex('#694398'),
                800 => Color::hex('#694398'),
                900 => Color::hex('#694398'),
                950 => Color::hex('#694398'),
            ],
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);
    }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Database\Eloquent\Model;
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Disable mass assignment protection. Filament handles this
        Model::unguard();

        FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::hex('#694398'),
            'info' => Color::Blue,
            'primary' => [
                50 => Color::hex('#694398'),
                100 => Color::hex('#694398'),
                200 => Color::hex('#694398'),
                300 => Color::hex('#694398'),
                400 => Color::hex('#694398'),
                500 => Color::hex('#694398'),
                600 => Color::hex('#694398'),
                700 => Color::hex('#694398'),
                800 => Color::hex('#694398'),
                900 => Color::hex('#694398'),
                950 => Color::hex('#694398'),
            ],
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);
    }
}

Colors - Core Concepts - Filament

Solution:

In v3 configure your colors in the panel service provider.

Jump to solution

17 Replies

Iliyas M•2y ago

This is enough i think. 'primary' => Color::hex('#694398'),

ScottOP•2y ago

Might be a bug, because all the buttons, text etc are still orange

ScottOP•2y ago

Iliyas M•2y ago

If u do this , filament itself generates palate for your hex color

ScottOP•2y ago

This is what I have prior to attempting to set each value

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Database\Eloquent\Model;
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Disable mass assignment protection. Filament handles this
        Model::unguard();

        FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::hex('#694398'),
            'info' => Color::Blue,
            'primary' =>  Color::hex('#694398'),
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);
    }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Database\Eloquent\Model;
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentColor;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // Disable mass assignment protection. Filament handles this
        Model::unguard();

        FilamentColor::register([
            'danger' => Color::Red,
            'gray' => Color::hex('#694398'),
            'info' => Color::Blue,
            'primary' =>  Color::hex('#694398'),
            'success' => Color::Green,
            'warning' => Color::Amber,
        ]);
    }
}

In the screenshot above it is changing some of the items, but not all (hex is purple)

Iliyas M•2y ago

Are u using v3?

ScottOP•2y ago

Yep Brand new install (started yesterday)

LeandroFerreira•2y ago

'primary' => '#694398',

'primary' => '#694398',

Solution

Iliyas M•2y ago

In v3 configure your colors in the panel service provider.

Iliyas M•2y ago

https://beta.filamentphp.com/docs/3.x/panels/themes#changing-the-colors

Themes - Panel Builder - Filament

ScottOP•2y ago

ahh, in the docs it doesnt say where to put this

LeandroFerreira•2y ago

just this

$panel
->colors([
    'primary' => '#694398',
])

$panel
->colors([
    'primary' => '#694398',
])

ScottOP•2y ago

im sure in teh getting started someone it talks about putting it in the boot for the app service provider

ScottOP•2y ago

ScottOP•2y ago

Nice... Thank you!

awcodes•2y ago

in v3 it needs to be in the panel provider and it needs to use the Color object

->colors([
    'primary' => Color::hex('#bada55'),
])

->colors([
    'primary' => Color::hex('#bada55'),
])

ScottOP•2y ago

great, thank you

Gaming

Programming

Primary Color for v3?

Did you find this page helpful?