Filament•10mo ago

How to change background color of sidebar

I wont to change the background color of the sidebar I found this description: https://filamentphp.com/docs/3.x/support/style-customization but I don't know where to put this code until it worked. .fi-sidebar { @apply bg-gray-50 dark:bg-gray-950; }

Style customization - Core Concepts - Filament

2 Replies

awcodes•10mo ago

If you’re using panels: https://filamentphp.com/docs/3.x/panels/themes#creating-a-custom-theme otherwise you just add it to your stylesheet.

Themes - Panel Builder - Filament

TranceCode•10mo ago

Hey bro! you have 2 options for change the color: 1.- Change de default colors in the panel, something like this:

 ->colors([
                'danger' => Color::rgb('rgb(255,0,0)'),
                'gray' => Color::Gray,
                'info' => Color::Green,
                'primary' => Color::Violet,
                'success' => Color::Lime,
                'warning' => Color::rgb('rgb(255,69,0)'),
                'edit' => Color::Blue,
            ])

 ->colors([
                'danger' => Color::rgb('rgb(255,0,0)'),
                'gray' => Color::Gray,
                'info' => Color::Green,
                'primary' => Color::Violet,
                'success' => Color::Lime,
                'warning' => Color::rgb('rgb(255,69,0)'),
                'edit' => Color::Blue,
            ])

2.- Or use a custom theme, like write @awcodes i think you need add this

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

@layer components {
    .fi-sidebar {
        @apply !bg-slate-50 dark:!bg-gray-900;
    }

    .fi-sidebar-item-icon {
        @apply !text-lime-600 dark:!text-violet-600;
    }

    .fi-main {
        @apply !bg-slate-100 dark:!bg-gray-800;
    }

    .fi-layout {
        @apply !bg-slate-100 dark:!bg-gray-800;
    }

    .fi-input-wrp {
        @apply focus-within:!ring-indigo-500 dark:focus-within:!ring-indigo-500 focus-within:!ring-1 dark:focus-within:!ring-1;
    }
    
}

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

@layer components {
    .fi-sidebar {
        @apply !bg-slate-50 dark:!bg-gray-900;
    }

    .fi-sidebar-item-icon {
        @apply !text-lime-600 dark:!text-violet-600;
    }

    .fi-main {
        @apply !bg-slate-100 dark:!bg-gray-800;
    }

    .fi-layout {
        @apply !bg-slate-100 dark:!bg-gray-800;
    }

    .fi-input-wrp {
        @apply focus-within:!ring-indigo-500 dark:focus-within:!ring-indigo-500 focus-within:!ring-1 dark:focus-within:!ring-1;
    }
    
}

@apply !bg-slate-50 dark:!bg-gray-900;

Gaming

Programming

How to change background color of sidebar