FilamentF
Filament•2y ago
WiseWill

notification color

I have added the following code to position the notifications used in the panel builder forms , and it is perfect (I can't remember how I found out how to do this):
    public function boot(): void
    {
        // All sorts of other stuff

    // Set position for notifications in Filament pages
        Notifications::alignment(Alignment::Center);
        Notifications::verticalAlignment(VerticalAlignment::Center);
    }

The notifications are a bit subtle for my use case. Is there a way to do something similar to change the notification colours and / or backgrounds for create and edit pages?
Solution
I found it - create a custom theme, and then in theme.css add
.fi-no-notification {
    background-color : rgba(var(--primary-600),var(--tw-bg-opacity));
}

.fi-no-notification-title {
    color: whitesmoke !important;
        font-size: 1.25rem !important;
        line-height: 1.5rem !important;
}

.fi-no-notification-body {
    color: whitesmoke !important;
}

Hopefully the CSS classes don't change in future versions.
Jump to solution
Was this page helpful?