Filament•14mo ago

Issue with primary color theme.

I have installed the tailwinds package, yet, I cant make my icons show blue (primary). When selecting Pending, the icon should show blue, right? All the other colors work fine...

public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name'),
                //Tables\Columns\TextColumn::make('is_completed'),
                IconColumn::make('taskstatusName.name')
                    ->label("Status")
                    ->colors([
                        'success' => 'Done',
                        'warning' => 'On Hold',
                        'danger' => 'Cancelled',
                        'primary' => 'Pending'
                    ])
                    ->options([
                        'heroicon-o-x-circle',
                        'heroicon-o-dots-circle-horizontal' => 'On Hold',
                        'heroicon-o-arrow-circle-down' => 'Pending',
                        'heroicon-o-check-circle' => 'Done',
                        'heroicon-o-x-circle' => 'Cancelled',
                    ]),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Tables\Actions\CreateAction::make(),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make(),
            ]);
    }

public static function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('name'),
                //Tables\Columns\TextColumn::make('is_completed'),
                IconColumn::make('taskstatusName.name')
                    ->label("Status")
                    ->colors([
                        'success' => 'Done',
                        'warning' => 'On Hold',
                        'danger' => 'Cancelled',
                        'primary' => 'Pending'
                    ])
                    ->options([
                        'heroicon-o-x-circle',
                        'heroicon-o-dots-circle-horizontal' => 'On Hold',
                        'heroicon-o-arrow-circle-down' => 'Pending',
                        'heroicon-o-check-circle' => 'Done',
                        'heroicon-o-x-circle' => 'Cancelled',
                    ]),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Tables\Actions\CreateAction::make(),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
                Tables\Actions\DeleteAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\DeleteBulkAction::make(),
            ]);
    }

43 Replies

Matthew•14mo ago

taliwinds config:

const colors = require('tailwindcss/colors') 

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.ts',
        './resources/**/*.vue',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: { 
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            }, 
        },
    },
    plugins: [
        require('@tailwindcss/forms'), 
        require('@tailwindcss/typography'), 
    ],
}

const colors = require('tailwindcss/colors') 

module.exports = {
    content: [
        './resources/**/*.blade.php',
        './resources/**/*.ts',
        './resources/**/*.vue',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: { 
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            }, 
        },
    },
    plugins: [
        require('@tailwindcss/forms'), 
        require('@tailwindcss/typography'), 
    ],
}

Matthew•14mo ago

The status can be selected from a dropdown (Select)

Dennis Koch•14mo ago

Did you follow the whole „Custom theme“ docs?

Matthew•14mo ago

Im pretty sure I did. Im not sure what Im doing wrong

Dan Harrin•14mo ago

if it was set up properly, then all of the amber would be blue so this isnt exclusively an icon column issue are you registering the theme in a service provider? your tailwind config is definitely wrong - no mention of filament in the content

Dennis Koch•14mo ago

Check every step again.

Matthew•14mo ago

I did, but I get this:

Dan Harrin•14mo ago

is this in the browser as well as the IDE?

Matthew•14mo ago

I dont get any error in the browser

Dan Harrin•14mo ago

its your IDE playing up then

Matthew•14mo ago

https://filamentphp.com/docs/2.x/admin/appearance#building-themes

Filament

Appearance - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

Matthew•14mo ago

const colors = require('tailwindcss/colors') 
 
module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php', 
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: { 
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            }, 
        },
    },
    plugins: [
        require('@tailwindcss/forms'), 
        require('@tailwindcss/typography'), 
    ],
}

const colors = require('tailwindcss/colors') 
 
module.exports = {
    content: [
        './resources/**/*.blade.php',
        './vendor/filament/**/*.blade.php', 
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: { 
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
            }, 
        },
    },
    plugins: [
        require('@tailwindcss/forms'), 
        require('@tailwindcss/typography'), 
    ],
}

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'


export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/filament.css',
            ],
        }),
    ],
})

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'


export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/filament.css',
            ],
        }),
    ],
})

(in resources/css/filament.css)
@import '../../vendor/filament/filament/resources/css/app.css';

(in resources/css/filament.css)
@import '../../vendor/filament/filament/resources/css/app.css';

<?php

namespace App\Providers;

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

class FilamentServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {
        Filament::serving(function () {
            // Using Vite
            Filament::registerViteTheme('resources/css/filament.css');
         
            // Using Laravel Mix
            Filament::registerTheme(
                mix('css/filament.css'),
            );
        });
    }
}

<?php

namespace App\Providers;

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

class FilamentServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap services.
     *
     * @return void
     */
    public function boot()
    {
        Filament::serving(function () {
            // Using Vite
            Filament::registerViteTheme('resources/css/filament.css');
         
            // Using Laravel Mix
            Filament::registerTheme(
                mix('css/filament.css'),
            );
        });
    }
}

Dennis Koch•14mo ago

You did compile your theme, right?

Dan Harrin•14mo ago

and are you really registering the theme twice?

Matthew•14mo ago

isnt it done automatically by laravel? How can I compile the theme? How do you mean?

Dan Harrin•14mo ago

read the code in boot() npm run build if you are using vite

Matthew•14mo ago

ohh, nono, I just tested with both just to be sure. But I ran it with just Vite initially

Dan Harrin•14mo ago

also, did you register FilamentServiceProvider in config/app ?

Dennis Koch•14mo ago

No it isn’t. It’s a Tailwind thing

Matthew•14mo ago

Ahhhhhh, yes That was the issue I didnt know that I had to do that 😅

Matthew•14mo ago

Now it works:) Thank you

Dan Harrin•14mo ago

normally i would just suggest to put it in AppServiceProvider so i dont have to explain that

Dennis Koch•14mo ago

First test: Does my code run 🤷‍♂️😅

Matthew•14mo ago

yes, it does 😅 Im just curious guys... how many years of experience do you have with programming/php? You have built something very robust (filament in general)

Matthew•14mo ago

But now everything is blue