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

Can you share your Panel Provider Settings?

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

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

awcodes•8mo ago

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

dyoOP•8mo 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'],
      },
};