Dark-mode/Light-mode
What would be the right approach to use separate color for dark and light mode ?
8 Replies
What is your use case? And what color are you trying to change?
Well, Right now its Blue on both modes but I want to switch to something different when its light mode
@awcodes
You want to change the primary color for the panel?
yes
is that possible?
@awcodes
what if only want to change colors for forms or may be just infolist
It’s possible, but it’s not going to be as clean as you’d like. Basically, you can’t do it from the php side, it has no context of light or dark mode since that is all client side.
What you can do is manually override the css properties for dark mode in a stylesheet/theme.
Filament outputs css properties for ever color that is registered with it. For example, —primary-500 —primary-600, etc.
So, theoretically, if you scope them in css you can reassign them to your own rgb values.
hmm I see... but I have one more question in my mind .. what if I don't change the panel but just the colors for forms or infolist I change (For instance, My data is in green color in infolist and when I switch to different mode it changes to red )?
@awcodes
Anything around light dark will need to be done through css, because it only exists in the browser.
You could potentially do it from the back end with extraAttributes() but you would have to define/register another color with filament called something other than primary
Like text-primary-500 and dark:text-darkprimary-500 for example.
understood thanks 🙂