Filament•2y 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

MatthewOP•2y 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'), 
    ],
}

MatthewOP•2y ago

The status can be selected from a dropdown (Select)

Dennis Koch•2y ago

Did you follow the whole „Custom theme“ docs?

MatthewOP•2y ago

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

Dan Harrin•2y 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•2y ago

Check every step again.

MatthewOP•2y ago

I did, but I get this:

Dan Harrin•2y ago

is this in the browser as well as the IDE?

MatthewOP•2y ago

I dont get any error in the browser

Dan Harrin•2y ago

its your IDE playing up then

MatthewOP•2y 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.

MatthewOP•2y 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•2y ago

You did compile your theme, right?

Dan Harrin•2y ago

and are you really registering the theme twice?

MatthewOP•2y ago

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

Dan Harrin•2y ago

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

MatthewOP•2y ago

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

Dan Harrin•2y ago

also, did you register FilamentServiceProvider in config/app ?

Dennis Koch•2y ago

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

MatthewOP•2y ago

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

MatthewOP•2y ago

Now it works:) Thank you

Dan Harrin•2y ago

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

Dennis Koch•2y ago

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

MatthewOP•2y 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)

MatthewOP•2y ago

But now everything is blue