Filament•16mo ago

[V3] Blade components do not have the good colour

Hi, I'm using Filament v3 and I'm trying to use the blade components, especially the button one. I'm experiencing an issue with that : in fact, when I change the primary colour of my theme, it is correctly reflected on all Filament parts of my dashboard EXCEPT on the components I manually use. Here is my AdminPanelProvider :

 public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => '#09F',
            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
                Widgets\FilamentInfoWidget::class,
            ])
            ->middleware([
                // ...
            ])
            ->authMiddleware([
                Authenticate::class,
            ])
            ->viteTheme('resources/css/filament/admin/theme.css');
    }

 public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => '#09F',
            ])
            ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
            ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
            ->pages([
                Pages\Dashboard::class,
            ])
            ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
            ->widgets([
                Widgets\AccountWidget::class,
                Widgets\FilamentInfoWidget::class,
            ])
            ->middleware([
                // ...
            ])
            ->authMiddleware([
                Authenticate::class,
            ])
            ->viteTheme('resources/css/filament/admin/theme.css');
    }

And how I use the button :

<x-filament::button @click="$dispatch('open-modal', { id: 'add-item' })">
                New item
</x-filament::button>

<x-filament::button @click="$dispatch('open-modal', { id: 'add-item' })">
                New item
</x-filament::button>

The button will stay orange, whereas the rest of the website is using correctly the primary colour #09F. Any idea?

16 Replies

LeandroFerreira•16mo ago

it was supposed to work. Did you clear cache, views? Where are you using this button?

TritusOP•16mo ago

Hey, Cache is cleared, both on the browser side and on the view side (php artisan view:clear). This button is used on a custom Filament page :

<x-filament-panels::page>
    <div>
        <div class="w-full text-right"> 
            <x-filament::button @click="$dispatch('open-modal', { id: 'add-item' })"> New
                item 
            </x-filament::button> 
        </div> 
        <x-filament::modal width="5xl" id="add-item"> 
            <x-slot name="heading">
                Add an item 
            </x-slot> 
            <livewire:create-item-form :$project /> 
        </x-filament::modal>
        <ul class="divide-y divide-gray-100"> 
            @foreach ($items as $item) 
                <x-item-planning :item="$item"
                :order="$loop->iteration">
                    <ul wire:sortable wire:end.stop="reorderItems($event.target.sortable.toArray())" class="w-full pl-12">
                        @foreach ($item->children()->orderBy('order')->get() as $child) <x-item-planning :key="$child->id"
                            :item="$child" :order="$loop->iteration" :parent-order="$loop->parent->iteration" /> 
                        @endforeach
                    </ul>
                </x-item-planning> 
            @endforeach 
        </ul>
    </div>
</x-filament-panels::page>

<x-filament-panels::page>
    <div>
        <div class="w-full text-right"> 
            <x-filament::button @click="$dispatch('open-modal', { id: 'add-item' })"> New
                item 
            </x-filament::button> 
        </div> 
        <x-filament::modal width="5xl" id="add-item"> 
            <x-slot name="heading">
                Add an item 
            </x-slot> 
            <livewire:create-item-form :$project /> 
        </x-filament::modal>
        <ul class="divide-y divide-gray-100"> 
            @foreach ($items as $item) 
                <x-item-planning :item="$item"
                :order="$loop->iteration">
                    <ul wire:sortable wire:end.stop="reorderItems($event.target.sortable.toArray())" class="w-full pl-12">
                        @foreach ($item->children()->orderBy('order')->get() as $child) <x-item-planning :key="$child->id"
                            :item="$child" :order="$loop->iteration" :parent-order="$loop->parent->iteration" /> 
                        @endforeach
                    </ul>
                </x-item-planning> 
            @endforeach 
        </ul>
    </div>
</x-filament-panels::page>

LeandroFerreira•16mo ago

did you try? <x-filament::button color="primary" ...

TritusOP•16mo ago

Yes I tried too, it does not change, the button is still orange

LeandroFerreira•16mo ago

weird.. did you try another value, 'primary' => Color::Indigo for example?

TritusOP•16mo ago

Yes I tried too, button keeps being orange Here are my tailwind config and CSS theme file under resources/css/filament/admin/ :

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography' 

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    plugins: [
        forms, 
        typography, 
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography' 

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    plugins: [
        forms, 
        typography, 
    ],
}

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

.fi-sidebar {
    @apply border-r border-blue-100;
}

@import '../../../../vendor/filament/filament/resources/css/theme.css';

@config './tailwind.config.js';

.fi-sidebar {
    @apply border-r border-blue-100;
}

LeandroFerreira•16mo ago

try this:

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

TritusOP•16mo ago

Nothing changed, still orange :/

LeandroFerreira•16mo ago

did you run artisan filament:upgrade?

TritusOP•16mo ago

Yes. I re-ran once again to be sure, but no change. I’m running Filament version 3.0.5

Ilham Dimas Prayudha•16mo ago

Try configure colors from service provider boot() like this https://filamentphp.com/docs/3.x/support/colors#customizing-the-default-colors

Colors - Core Concepts - Filament

TritusOP•16mo ago

Wonderful, it worked ! Thanks @Leandro Ferreira and @idpry for your help!

LeandroFerreira•16mo ago

Honestly, I don't know why. It was supposed to work without it 😅

TritusOP•16mo ago

I can't tell you why it's not working the way I initially did, sorry!

LeandroFerreira•16mo ago

no worries ✌️

cigoler•16mo ago

I've run into the same problem, just curious if we know why? I'm presuming it's something I've done wrong as usual - but basically followed the manual steps for installing tailwind etc into an existing laravel project as per the recommendations on the Forms documentation. The boot override works, though.

Gaming

Programming

[V3] Blade components do not have the good colour