Filament•10mo ago

Dark background color

Hi, I'm trying to make my first filament panels application. I would like to set the background to something dark (black or dark gray, like the dark mode). I've tried to set the colors in the AdminPanelProvider, but I don't believe there is a "backgroundColor" attribute. I believe that the problem is that it should be dark in the main mode (light mode I guess). Are there any solutions for this ? Thanks in advance !

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => '#1662AD',
            ]);
    }
}

class AdminPanelProvider extends PanelProvider
{
    public function panel(Panel $panel): Panel
    {
        return $panel
            ->default()
            ->id('admin')
            ->path('admin')
            ->login()
            ->colors([
                'primary' => '#1662AD',
            ]);
    }
}

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

Themes - Panel Builder - Filament

3 Replies

WEBMAS•10mo ago

You can put any color for the desired tone. To understand what tone an element uses, look at its class in the HTML code. For example class primary-500 or gray-900

->colors([
    'gray' = [
        50 => '250, 250, 250',
        100 => '245, 245, 245',
        200 => '229, 229, 229',
        300 => '212, 212, 212',
        400 => '163, 163, 163',
        500 => '115, 115, 115',
        600 => '82, 82, 82',
        700 => '64, 64, 64',
        800 => '38, 38, 38',
        900 => '23, 23, 23',
        950 => '10, 10, 10',
    ],
    'primary' => [
        50 => '239, 246, 255',
        100 => '219, 234, 254',
        200 => '191, 219, 254',
        300 => '147, 197, 253',
        400 => '96, 165, 250',
        500 => '59, 130, 246',
        600 => '37, 99, 235',
        700 => '29, 78, 216',
        800 => '30, 64, 175',
        900 => '30, 58, 138',
        950 => '23, 37, 84',
    ],
]);

https://tailwindcolor.com/

Merlijn01OP•10mo ago

Thanks for the answer. In my case, the body has a bg-gray-50. Setting the value of gray-50 to black feels a bit dirty, but it kinda does the job. The problem that comes with setting the lightest gray to black is that for example the navbar remains white. It seems that I can't set a value for the color white. What I think would be a solution to my problem is either setting the dark_mode as default, or manually giving classes to elements.

Dennis Koch•10mo ago

Create a theme and overwrite what you want via CSS

Gaming

Programming

Dark background color

Did you find this page helpful?