Filament•6mo ago

Missing filament primary color after version upgrade

Can someone help for my problem above? My action buttons which are without color method is like transparent background. For example, In attached image, there's actually a create button on the table header action. I've already got primary color in $panel->colors(). I've tried this also: https://filamentphp.com/docs/3.x/support/colors#customizing-the-default-colors What should I do?

Colors - Core Concepts - Filament

12 Replies

slamx_•6mo ago

Can you share your Panel Provider Settings?

dyoOP•6mo ago

sure

return $panel
  ->default()
  ->id('admin')
  ->path('admin')
  ->login()
  ->colors([
      'primary' => Color::Amber,
      'danger' => Color::Rose,
      'gray' => Color::Gray,
      'info' => Color::Blue,
      'success' => Color::Emerald,
      'warning' => Color::Orange,
  ])
  ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
  ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
  ->pages([])
  ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
  ->widgets([
      Widgets\AccountWidget::class,
      Widgets\FilamentInfoWidget::class,
  ])
  ->databaseNotifications()
  ->middleware([
      EncryptCookies::class,
      AddQueuedCookiesToResponse::class,
      StartSession::class,
      AuthenticateSession::class,
      ShareErrorsFromSession::class,
      VerifyCsrfToken::class,
      SubstituteBindings::class,
      DisableBladeIconComponents::class,
      DispatchServingFilamentEvent::class,
  ])
  ->authMiddleware([
      Authenticate::class,
  ])
  ->viteTheme('resources/css/filament/admin/theme.css')
  ->plugins([
      SpotlightPlugin::make(),
  ]);

return $panel
  ->default()
  ->id('admin')
  ->path('admin')
  ->login()
  ->colors([
      'primary' => Color::Amber,
      'danger' => Color::Rose,
      'gray' => Color::Gray,
      'info' => Color::Blue,
      'success' => Color::Emerald,
      'warning' => Color::Orange,
  ])
  ->discoverResources(in: app_path('Filament/Resources'), for: 'App\\Filament\\Resources')
  ->discoverPages(in: app_path('Filament/Pages'), for: 'App\\Filament\\Pages')
  ->pages([])
  ->discoverWidgets(in: app_path('Filament/Widgets'), for: 'App\\Filament\\Widgets')
  ->widgets([
      Widgets\AccountWidget::class,
      Widgets\FilamentInfoWidget::class,
  ])
  ->databaseNotifications()
  ->middleware([
      EncryptCookies::class,
      AddQueuedCookiesToResponse::class,
      StartSession::class,
      AuthenticateSession::class,
      ShareErrorsFromSession::class,
      VerifyCsrfToken::class,
      SubstituteBindings::class,
      DisableBladeIconComponents::class,
      DispatchServingFilamentEvent::class,
  ])
  ->authMiddleware([
      Authenticate::class,
  ])
  ->viteTheme('resources/css/filament/admin/theme.css')
  ->plugins([
      SpotlightPlugin::make(),
  ]);

Vp•6mo ago

IIRC you also need 'custom' => Color::Amber Or not. can you run npm run build to see it's working or not cause you've another theme as well

dyoOP•6mo ago

I've ran npm run build. what else should I try?

awcodes•6mo ago

Can you show us your resources/css/filament/admin.css And resources/css/filament/tailwind.config.js

dyoOP•6mo ago

@awcodes here's tailwind config

const defaultTheme = require("tailwindcss/defaultTheme");

import colors from 'tailwindcss/colors'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'


/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./node_modules/tw-elements/dist/js/**/*.js",
        './vendor/filament/**/*.blade.php',
        './vendor/savannabits/filament-flatpickr/**/*.blade.php',

    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Nunito", ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        require("@tailwindcss/forms"),
        require("daisyui"),
        require("tw-elements/dist/plugin.cjs"),
        typography,
        require('flowbite/plugin')
    ],
    daisyui: {
        themes: ['light'],
      },
};

const defaultTheme = require("tailwindcss/defaultTheme");

import colors from 'tailwindcss/colors'
import forms from '@tailwindcss/forms'
import typography from '@tailwindcss/typography'


/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: 'class',
    content: [
        "./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
        "./storage/framework/views/*.php",
        "./resources/views/**/*.blade.php",
        "./node_modules/tw-elements/dist/js/**/*.js",
        './vendor/filament/**/*.blade.php',
        './vendor/savannabits/filament-flatpickr/**/*.blade.php',

    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ["Nunito", ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [
        require("@tailwindcss/forms"),
        require("daisyui"),
        require("tw-elements/dist/plugin.cjs"),
        typography,
        require('flowbite/plugin')
    ],
    daisyui: {
        themes: ['light'],
      },
};

and i don't have admin.css in that path, how can i have that?

awcodes•6mo ago

You’re using panels, right? Either way you’re missing the filament preset in your tailwind.config.js. Theming changed between v2 and v3

awcodes•6mo ago

https://filamentphp.com/docs/3.x/panels/themes

Themes - Panel Builder - Filament

awcodes•6mo ago

This could also affect any plugins you might be using.

dyoOP•6mo ago

yes i'm using panels.. how can i reset it?

Dennis Koch•6mo ago

Best to follow the theme instructions in the docs

dyoOP•6mo ago

thanks, eventually I reset my tailwind config to basic, and start from zero again to use plugins

Gaming

Programming

Missing filament primary color after version upgrade