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

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

ScottOP•16mo ago

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

ScottOP•16mo ago

Iliyas M•16mo ago

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

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

Are u using v3?

ScottOP•16mo ago

Yep Brand new install (started yesterday)

LeandroFerreira•16mo ago

'primary' => '#694398',

'primary' => '#694398',

Solution

Iliyas M•16mo ago

In v3 configure your colors in the panel service provider.

Iliyas M•16mo ago

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

Themes - Panel Builder - Filament

ScottOP•16mo ago

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

LeandroFerreira•16mo ago

just this

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

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

ScottOP•16mo ago

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

ScottOP•16mo ago

ScottOP•16mo ago

Nice... Thank you!

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

great, thank you

Gaming

Programming

Primary Color for v3?