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

Can you share your Panel Provider Settings?

dyoOP•7mo 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•7mo 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•7mo ago

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

awcodes•7mo ago

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

dyoOP•7mo 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•7mo 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•7mo ago

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

Themes - Panel Builder - Filament

awcodes•7mo ago

This could also affect any plugins you might be using.

dyoOP•7mo ago

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

Dennis Koch•7mo ago

Best to follow the theme instructions in the docs

dyoOP•7mo 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