is it necessary to create a custom theme to add tailwind colors
Hi
I have made a new project with filamentphp v3, and i try to follow this document - https://filamentphp.com/docs/3.x/support/colors
So i just use the FilamentColor::register in my AppServiceProvider.php and then i use it in my custom page blade view file
Somehow this is not working.
Do i need to make a custom theme to use this ??
Please let me know your thoughts.
4 Replies
I tried every way ..but still the custom colors don't apply to my code.
The classes are not there in filament.css and i tried running npm run dev and npm run build too..but no luck for me
fallow all steps on the docs to create a theme
Thank you for your response.
I believed that i will not need to create a custom theme because when i read the docs here -
https://filamentphp.com/docs/3.x/support/colors#registering-extra-colors
I thought this should work by just registering extra colors. And these colors are present in tailwindcss preset. And thus it should have been there in Filament\Support\Colors\Color
Below is my AppServiceProvider.php
<?php
namespace App\Providers;
use Filament\Support\Assets\Css;
use Filament\Support\Assets\Js;
use Filament\Support\Colors\Color;
use Filament\Support\Facades\FilamentAsset;
use Filament\Support\Facades\FilamentColor;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
/
* Register any application services.
*/
public function register(): void
{
//
}
/
* Bootstrap any application services.
*/
public function boot(): void
{
FilamentAsset::register([
Css::make('animated-css-tailwind', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'), ]); FilamentColor::register([ 'danger' => Color::Red, 'gray' => Color::Zinc, 'info' => Color::Blue, 'primary' => Color::Amber, 'success' => Color::Green, 'warning' => Color::Amber, 'indigo' => Color::Indigo, ]); } }
Css::make('animated-css-tailwind', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'), ]); FilamentColor::register([ 'danger' => Color::Red, 'gray' => Color::Zinc, 'info' => Color::Blue, 'primary' => Color::Amber, 'success' => Color::Green, 'warning' => Color::Amber, 'indigo' => Color::Indigo, ]); } }