Filament•17mo 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•17mo ago

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

ScottOP•17mo ago

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

ScottOP•17mo ago

Iliyas M•17mo ago

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

ScottOP•17mo 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•17mo ago

Are u using v3?

ScottOP•17mo ago

Yep Brand new install (started yesterday)

LeandroFerreira•17mo ago

'primary' => '#694398',

'primary' => '#694398',

Solution

Iliyas M•17mo ago

In v3 configure your colors in the panel service provider.

Iliyas M•17mo ago

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

Themes - Panel Builder - Filament

ScottOP•17mo ago

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

LeandroFerreira•17mo ago

just this

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

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

ScottOP•17mo ago

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

ScottOP•17mo ago

ScottOP•17mo ago

Nice... Thank you!

awcodes•17mo 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•17mo ago

great, thank you

Gaming

Programming

Primary Color for v3?