Filament•6mo ago

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

Abdur Razzaque•6mo ago

Where do you use the class?

Noor•6mo ago

theme.css Its this when I inspect 1st picture

<tr x-bind:class="{
            'hidden': false &amp;&amp; isGroupCollapsed(''),
            'bg-gray-50 dark:bg-white/5': isRecordSelected('1364'),
            '[&amp;>*:first-child]:relative [&amp;>*:first-child]:before:absolute [&amp;>*:first-child]:before:start-0 [&amp;>*:first-child]:before:inset-y-0 [&amp;>*:first-child]:before:w-0.5 [&amp;>*:first-child]:before:bg-primary-600 [&amp;>*:first-child]:dark:before:bg-primary-500': isRecordSelected('1364'),
        }" class="fi-ta-row [@media(hover:hover)]:transition [@media(hover:hover)]:duration-75 hover:bg-gray-50 dark:hover:bg-white/5 bg-gray-50 dark:bg-white/5 [&amp;>*:first-child]:relative [&amp;>*:first-child]:before:absolute [&amp;>*:first-child]:before:start-0 [&amp;>*:first-child]:before:inset-y-0 [&amp;>*:first-child]:before:w-0.5 [&amp;>*:first-child]:before:bg-primary-600 [&amp;>*:first-child]:dark:before:bg-primary-500 __web-inspector-hide-shortcut__" wire:key="vcT8ps8wUCRQnj9bc9Ru.table.records.1364">

<tr x-bind:class="{
            'hidden': false &amp;&amp; isGroupCollapsed(''),
            'bg-gray-50 dark:bg-white/5': isRecordSelected('1364'),
            '[&amp;>*:first-child]:relative [&amp;>*:first-child]:before:absolute [&amp;>*:first-child]:before:start-0 [&amp;>*:first-child]:before:inset-y-0 [&amp;>*:first-child]:before:w-0.5 [&amp;>*:first-child]:before:bg-primary-600 [&amp;>*:first-child]:dark:before:bg-primary-500': isRecordSelected('1364'),
        }" class="fi-ta-row [@media(hover:hover)]:transition [@media(hover:hover)]:duration-75 hover:bg-gray-50 dark:hover:bg-white/5 bg-gray-50 dark:bg-white/5 [&amp;>*:first-child]:relative [&amp;>*:first-child]:before:absolute [&amp;>*:first-child]:before:start-0 [&amp;>*:first-child]:before:inset-y-0 [&amp;>*:first-child]:before:w-0.5 [&amp;>*:first-child]:before:bg-primary-600 [&amp;>*:first-child]:dark:before:bg-primary-500 __web-inspector-hide-shortcut__" wire:key="vcT8ps8wUCRQnj9bc9Ru.table.records.1364">

<td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 w-1">
    <div class="px-3 py-4">

<td class="fi-ta-cell p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3 w-1">
    <div class="px-3 py-4">

Abdur Razzaque•6mo ago

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.

Noor•6mo ago

It's in the documentation

Abdur Razzaque•6mo ago

This documentation helps me to change the theme: https://filamentphp.com/docs/3.x/panels/themes

Themes - Panel Builder - Filament

Noor•6mo ago

yes but if you want to override what filament is already using .. you do it with theme.css

Abdur Razzaque•6mo ago

Oh! so you are making a custom theme.

Noor•6mo ago

yes so I need help to change those colors I showed in pictures

Abdur Razzaque•6mo ago

Your question isn't clear. Are you finding the color code? or How to use the color to your theme??

Noor•6mo ago

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.

Matthew•6mo ago

@Noor Did you run npm run build?

Noor•6mo ago

yes

Matthew•6mo ago

Any output?

Noor•6mo ago

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

Matthew•6mo ago

what do you mean sideline? The dropdown?

Noor•6mo ago

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

Matthew•6mo ago

ohh, how do you get this?

Noor•6mo ago

well I need to change that too

Matthew•6mo ago

from table?

Noor•6mo ago

yes I used fi-ta-row and fi-ta-cell it didn't worked

Matthew•6mo ago

I dont know how you got the line thing Ive never seen it before. But do this:

Noor•6mo ago

its by default in app

Matthew•6mo ago

ctrl + shift + I

Matthew•6mo ago

select this (left)

Matthew•6mo ago

Click on the line, and show me html

Noor•6mo ago

which line?

Matthew•6mo ago

The line you want to change the color of

Noor•6mo ago

Matthew•6mo ago

Good, now take all those classes, paste them in the theme css (with the "." in front) change the background color. Save npm run build

Noor•6mo ago

not working

Abdur Razzaque•6mo ago

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.

use Filament\Panel;
use Filament\Support\Colors\Color;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'danger' => Color::Rose,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Emerald,
            'warning' => Color::Orange,
        ]);
}

use Filament\Panel;
use Filament\Support\Colors\Color;
 
public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->colors([
            'danger' => Color::Rose,
            'gray' => Color::Gray,
            'info' => Color::Blue,
            'primary' => Color::Indigo,
            'success' => Color::Emerald,
            'warning' => Color::Orange,
        ]);
}

Noor•6mo ago

Yes but I'm using different colors on dark/light mode

Abdur Razzaque•6mo ago

You can use any different colors on here.

Noor•6mo ago

how?

Abdur Razzaque•6mo ago

$panel ->colors([ 'primary' => '#6366f1', ]) $panel ->colors([ 'primary' => 'rgb(99, 102, 241)', ])

Noor•6mo ago

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

Matthew•6mo ago

First of all are you running v2 or v3? Because those colors remind me of v2 php artisan about

Noor•6mo ago

Abdur Razzaque•6mo ago

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.

awcodes•6mo ago

->colors([
   …
    ‘dkprimary’ => Color::hex(‘#bada55’)
])

->colors([
   …
    ‘dkprimary’ => Color::hex(‘#bada55’)
])

.dark .fi-ta-row {
    border-left-color: rgb(—dkprimary-500);
}

.dark .fi-ta-row {
    border-left-color: rgb(—dkprimary-500);
}

Noor•6mo ago

don't I need to use @apply?

awcodes•6mo ago

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. 🙂

Noor•6mo ago

but the above code is not working it shows border-left-color doesn't exist

awcodes•6mo ago

My bad. rgb(var(—dkprimary-500))

awcodes•6mo ago

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.

awcodes•6mo ago

The css property might be named wrong too. Check your dev tool for the right css property name.

Noor•6mo ago

Can you tell me please if this tailwind css I'm using is right or not

.fi-fo-textarea {
    @apply focus-visible:!ring-sky-300/80 dark:focus-visible:!ring-orange-300/30;
}

/* Table */

.fi-ta-ctn {
    @apply ring-sky-300/80 dark:!ring-orange-300/30;
}

.fi-ta-content {
    @apply !border-t-sky-300/80 dark:!border-t-orange-300/30;

.fi-fo-textarea {
    @apply focus-visible:!ring-sky-300/80 dark:focus-visible:!ring-orange-300/30;
}

/* Table */

.fi-ta-ctn {
    @apply ring-sky-300/80 dark:!ring-orange-300/30;
}

.fi-ta-content {
    @apply !border-t-sky-300/80 dark:!border-t-orange-300/30;

I'm confused after u said that we dont need to use apply

awcodes•6mo ago

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.

Noor•6mo ago

so should I not use them ..is that a wrong way ? these colors are registerd in app panel provider

awcodes•6mo ago

Can you share the code from your panel provider for your colors.?

Noor•6mo ago

->colors([
                'danger' => Color::Rose,
                'gray' => Color::Gray,
                'info' => Color::Blue,
                'primary' => '#014bde',
                'success' => Color::Emerald,
                'warning' => Color::Orange,
                'cyan'=>'#06b6d4', //500
                'sky' => Color::Sky,
])

->colors([
                'danger' => Color::Rose,
                'gray' => Color::Gray,
                'info' => Color::Blue,
                'primary' => '#014bde',
                'success' => Color::Emerald,
                'warning' => Color::Orange,
                'cyan'=>'#06b6d4', //500
                'sky' => Color::Sky,
])

I'm tensed now what if I did it in wrong way .. because I've done all customization

awcodes•6mo ago

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.

Noor•6mo ago

so right approach is using hex or rgb like you used above?

awcodes•6mo ago

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)

Noor•6mo ago

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

'cyan'=> Color::hex('#06b6d4'), 
                'sky' => Color::hex('#0369a1'),

'cyan'=> Color::hex('#06b6d4'), 
                'sky' => Color::hex('#0369a1'),

or in filament register.

awcodes•6mo ago

that goes in the panel

Noor•6mo ago

ok and then what goes in theme.css ? so after I registered sky in panel can I use

.fi-in-tabs {
    @apply ring-sky-300/80 }

.fi-in-tabs {
    @apply ring-sky-300/80 }

in theme.css? @awcodes

awcodes•6mo ago

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.

Noor•6mo ago

yes please because this is not working for me

rgb(var(—sky-500))

rgb(var(—sky-500))

awcodes•6mo ago

I think we’re over complicating this. Try this:

public function table(Table $table): Table
{
    return $table
        ->recordClasses(fn () => ‘border-l-sky-500’)
}

public function table(Table $table): Table
{
    return $table
        ->recordClasses(fn () => ‘border-l-sky-500’)
}

As long as you have ./app/Filament/**/*.php in the content of your tailwind config for the theme I would expect that to work.

awcodes•6mo ago

https://filamentphp.com/docs/3.x/tables/advanced#custom-row-classes

Advanced - Table Builder - Filament

Noor•6mo ago

ok I'll try that let me see

awcodes•6mo ago

If that doesn’t work last ditch effort would be:

.fa-whatever {
  border-left: solid 2px theme(‘colors.sky.500’):
}

.fa-whatever {
  border-left: solid 2px theme(‘colors.sky.500’):
}

Noor•6mo ago

This works but I want it to be when I check the checkbox

awcodes•6mo ago

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?

Noor•6mo ago

nah.. I'm trying I'm trying to find class where is that color coming from when you check the checkbox

awcodes•6mo ago

Which checkbox?

Noor•6mo ago

so when you tick that box the color pop ups blue color which I'm trying to change

awcodes•6mo ago

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

Noor•6mo ago

did you done test ?@awcodes

awcodes•6mo ago

@Noor theme.css

.fi-ta-cell::before {
    background-color: theme('colors.lime.500') !important;
}

.dark .fi-ta-cell::before {
    background-color: theme('colors.lime.500') !important;
}

.fi-ta-cell::before {
    background-color: theme('colors.lime.500') !important;
}

.dark .fi-ta-cell::before {
    background-color: theme('colors.lime.500') !important;
}

tailwind.config.js

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
import colors from 'tailwindcss/colors'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                lime: colors.lime,
            }
        }
    }
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
import colors from 'tailwindcss/colors'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                lime: colors.lime,
            }
        }
    }
}

Noor•6mo ago

This worked so I need to use all custom colors like sky orange cyan in config?

awcodes•6mo ago

Depends on how you are using them. I’m still not sure why you are trying to change something that is the primary color.

Noor•6mo ago

I know but this is something I've been told to do

awcodes•6mo ago

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.

Noor•6mo ago

Is it right if we override classes too much its gonna break the layout of default app ?

awcodes•6mo ago

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. 😀

Noor•6mo ago

yeah I understand but it's not in my hand .. I have to do what I've told to do

awcodes•6mo ago

Understandable

Noor•6mo ago

big thanks for your help ☺️

awcodes•6mo ago

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.

Noor•6mo ago

Noted ✔️

awcodes•6mo ago

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.

Noor•6mo ago

hmmm yeah understood... I'll keep everything in mind thankyou 🙂

Gaming

Programming

Colors