Colors
I've attached two pictures , can someone help me with this I'm trying so hard to change their colors using different classes but nothing works . In first
picture I'm trying to change side border which has a default color and in 2nd pic I'm trying to change light blue color in dropdown list . I really need to know how to use right classes for these ty.
87 Replies
Where do you use the class?
theme.css
Its this when I inspect 1st picture
I don't know, why do you need this type of edit. But the filament recommendation to use the filament theme. Also I don't have the idea, where do you find the theme.css.
It's in the documentation
This documentation helps me to change the theme: https://filamentphp.com/docs/3.x/panels/themes
yes but if you want to override what filament is already using .. you do it with theme.css
Oh! so you are making a custom theme.
yes
so I need help to change those colors I showed in pictures
Your question isn't clear. Are you finding the color code? or How to use the color to your theme??
I'm looking for the right class to change default color I've mentioned it
I'm not looking for color code or use color to theme ... I've changed everything only these two are trouble for me.
@Noor Did you run
npm run build?yes
Any output?
how to find specific class to change these features that's what I know .. I'm pretty sure I'm using wrong class
from here what class can i use or what element can i use to change color of side line showd in 1st picture
what do you mean sideline?
The dropdown?
the blue line when you check the box
I want it to be orange
and I couldn't find the right class to change it
ohh, how do you get this?
well I need to change that too
from table?
yes
I used fi-ta-row and fi-ta-cell it didn't worked
I dont know how you got the line thing
Ive never seen it before. But do this:
its by default in app
ctrl + shift + I
select this (left)
Click on the line, and show me html
which line?
The line you want to change the color of
Good, now take all those classes, paste them in the theme css (with the "." in front)
change the background color.
Save
npm run build
not working
I'm pretty sure that, you're doing something that not required.
This code can change the all the colors of filament theme. Where don't need to find the exact class. or any custom theme.
Yes but I'm using different colors on dark/light mode
You can use any different colors on here.
how?
$panel
->colors([
'primary' => '#6366f1',
])
$panel
->colors([
'primary' => 'rgb(99, 102, 241)',
])
how will you do it can you show me ?
don't we need to mention its dark:bg-primary-500 ?
I know I can set any color in panel but we need to mention it its dark eg: dark:bg-primary-500
First of all are you running v2 or v3?
Because those colors remind me of v2
php artisan aboutv3
I'm sorry, I never required this type customization. I think you can check to core concept from documentation to find the avaible class to filament.
don't I need to use @apply?
You don’t have to. It’s still just css.
And apply isn’t going to work in this case because it’s a custom color which won’t exist when tailwind compiles.
I could explain how custom colors work in filament with tailwind, but there’s no way I’m going to try to type all that out. 🙂
but the above code is not working
it shows border-left-color doesn't exist
My bad.
rgb(var(—dkprimary-500))And border-left-color certainly exists. https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
MDN Web Docs
border-left-color - CSS: Cascading Style Sheets | MDN
The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.
The css property might be named wrong too. Check your dev tool for the right css property name.
Can you tell me please if this tailwind css I'm using is right or not
I'm confused after u said that we dont need to use apply
You’re using a custom theme. Colors like orange and sky aren’t going to exist if they aren’t used in any of the files that tailwind is scanning during its build.
so should I not use them ..is that a wrong way ?
these colors are registerd in app panel provider
Can you share the code from your panel provider for your colors.?
I'm tensed now what if I did it in wrong way .. because I've done all customization
Ok. Yea. Cyan and sky in this case aren’t setting anything in your tailwind. Filament take custom colors like that and outputs them as custom css properties so using something like bg-sky-500 will break your tailwind build.
So, in filament when you do something like ->color(‘sky’) it’s change the css property/variable to use the —sky-500 etc property.
so right approach is using hex or rgb like you used above?
So if you want to use those in css you have to call them as such with rgb(var(—sky-500)) or rgba(var(—sky-500), 1)
ok I'll correct it thankyou so much you saved me 🙂
Just wanna clarify that custom color goes in tailwind.config file? or I would use something like this in panel or in filament register.
that goes in the panel
ok and then what goes in theme.css ? so after I registered sky in panel can I use in theme.css?
@awcodes
Actually, this may not work. Custom colors get dynamically changed through the css properties on the components. Let me think about it some more. On my phone and can’t try anything.
yes please because this is not working for me
I think we’re over complicating this.
Try this:
As long as you have
./app/Filament/**/*.php in the content of your tailwind config for the theme I would expect that to work.ok I'll try that let me see
If that doesn’t work last ditch effort would be:
This works but I want it to be when I check the checkbox
Look at the doc I linked. You can pass the record and use it to determine what classes to add to the row.
So you could add a more descriptive class name to the row then target it in the css.
Did https://discord.com/channels/883083792112300104/1186782132639633438/1187162736656908350 not work?
nah.. I'm trying
I'm trying to find class where is that color coming from when you check the checkbox
Which checkbox?
so when you tick that box the color pop ups
blue color
which I'm trying to change
Ah. Ok. I would have to test something’s but that should be doable with the :has pseudo selector is css.
If the theme() helper worked then it just a matter of getting the css selector right for rows that have a checkbox that is ::checked
did you done test ?@awcodes
@Noor
theme.css
tailwind.config.js
This worked so I need to use all custom colors like sky orange cyan in config?
Depends on how you are using them. I’m still not sure why you are trying to change something that is the primary color.
I know but this is something I've been told to do
For things like badges and actions that have color() modifier then you don’t have to go through all this. You’re just trying to change things that weren’t meant to be customized.
Is it right if we override classes too much its gonna break the layout of default app ?
It’s not going to break the layout unless you do it intentionally
But the point of a theme is to create consistency in a design system. And changing something like that border breaks that consistency.
But it’s your app. Do what you need to. 😀
yeah I understand but it's not in my hand .. I have to do what I've told to do
Understandable
big thanks for your help ☺️
Just remember that something like this is open to breaking if the views and how filament is applying styles to things like this change in the future.
Noted ✔️
Ie, currently filament is applying that via alpine when the checkbox is clicked by adding a ::before class, so if that changes in the future you’ll have to figure out a way to fix it.
Where as using ->color(‘custom’) on an action won’t break.
Good luck with it though. But that’s a way to achieve what you’re after.
hmmm yeah understood... I'll keep everything in mind thankyou 🙂