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

Can you share your Panel Provider Settings?

dyo•5w 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•5w 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

dyo•4w ago

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

awcodes•4w ago

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

dyo•4w 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•4w 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•4w ago

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

Themes - Panel Builder - Filament

awcodes•4w ago

This could also affect any plugins you might be using.

dyo•4w ago

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

Dennis Koch•4w ago

Best to follow the theme instructions in the docs

dyo•4w 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