Filament•2y ago

Changing Navbar Color

I have changed the navbar color according to the documentation https://filamentphp.com/docs/3.x/support/style-customization but my problem is by default the navigation label are gray so i changed to white as shown on my screenshot but when i do that when the navigation button is active the text is still white. How can i target the active navigation item. I looked through the dev tool but cannot target the active item

Style customization - Core Concepts - Filament

.fi .fi-sidebar
{
    background-color: #27374D;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-label {
    @apply text-white
}

.fi-sidebar-item-label:hover {
    @apply text-primary-900;
}

.fi .fi-sidebar
{
    background-color: #27374D;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-label {
    @apply text-white
}

.fi-sidebar-item-label:hover {
    @apply text-primary-900;
}

.fi-sidebar-item .fi-sidebar-item-button .fi-sidebar-item-label  {
    @apply text-white
}

.fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900 !important;
}

.fi-sidebar-item .fi-sidebar-item-button .fi-sidebar-item-label  {
    @apply text-white
}

.fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label {
    @apply text-primary-900;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    @apply text-primary-900 !important;
}