[doc] [HxMessenger] Toast customization

[bluisanajmr]

Hello,

I am using HXmessanger and toast messages as my main way of messaging back to the user. I want to completely customize the look and feel of the toast messages. I am stuck on being able to change the background color because the dom renders the toast message with bg-primary. I don't want to change bg-primary for my entire project. How can I get around this?

[crdo]

Hi @bluisanajmr, you have to rely on overriding the bg-xxx classes via CSS vars in the scope of the hx-messenger and isolate the changes just inside the HxMessenger.

[hakenr]

@bluisanajmr, @crdo, Actually, there are two easier methods to customize HxMessenger toast messages:

1. You can modify the defaults for pre-defined methods like AddInformation(), AddWarning(), and AddError(). These are extension methods, and their settings can be altered via HxMessengerServiceExtensions.Defaults. For example, you can change the information color using HxMessengerServiceExtensions.Defaults.InformationColor = ThemeColor.Info.
2. The IHxMessengerService provides a comprehensive AddMessage(MessengerMessage message) method for emitting messages. This allows you to create fully customized messages (MessengerMessage). Additionally, you can craft your own extension method to simplify the process.

I will add this to the HxMessenger documentation to make these customizations more discoverable.

[bluisanajmr]

Thanks Hakenr,

I tried using the theme colors from my program.cs but unfortunately, those colors aren't exactly what I wanted. I was hoping at first that I could set the theme color to none and then create my own CSS colors but setting the theme color to none throws an error.

//default for components SetHxComponents();

private static void SetHxComponents() { HxMessengerServiceExtensions.Defaults.InformationAutohideDelay = 90000; // ms HxMessengerServiceExtensions.Defaults.InformationColor = ThemeColor.None; }

With my requirements creating a completely custom MessengerMessage that is used for all of my toast message makes the most sense. I will work on that and post my solution in here when I get it working.

Thanks again,

[bluisanajmr]

Hey Hakenr,

I was able to achieve exactly what I wanted with the AddMessage method and some custom CSS. I have a component that renders all of my messages and does logging at the same time. It has a custom _message property that gets set in state and can be set from any component.

This is the server side code that I used to render my custom messages to toast.

MessengerMessage custmessage = new MessengerMessage();

custmessage.Text = _message.Message;

if (_message != null)
{
    switch (_message.MessageType)
    {
        case MessageType.warning:
            {
                custmessage.CssClass = "toast-warning mb-2";
                custmessage.AutohideDelay = 300000;
                Messenger.AddMessage(custmessage);
                break;
            }
        case MessageType.error:
            {
                custmessage.CssClass = "toast-danger mb-2";
                custmessage.AutohideDelay = 300000;
                Messenger.AddMessage(custmessage);
                break;
            }
        case MessageType.status:
            {
                custmessage.CssClass = "toast-success mb-2";
                custmessage.AutohideDelay = 300000;
                Messenger.AddMessage(custmessage);
                break;
            }
    }

Then I added these classes to my app.css

.toast-warning {
    --bs-toast-color: var(--bs-warning-text-emphasis);
    --bs-toast-bg: var(--bs-warning-bg-subtle);
    --bs-toast-border-color: var(--bs-warning-border-subtle);
    --bs-toast-link-color: var(--bs-warning-text-emphasis);
}

.toast-danger {
    --bs-toast-color: var(--bs-danger-text-emphasis);
    --bs-toast-bg: var(--bs-danger-bg-subtle);
    --bs-toast-border-color: var(--bs-danger-border-subtle);
    --bs-toast-link-color: var(--bs-danger-text-emphasis);
}

.toast-success {
    --bs-toast-color: var(--bs-success-text-emphasis);
    --bs-toast-bg: var(--bs-success-bg-subtle);
    --bs-toast-border-color: var(--bs-success-border-subtle);
    --bs-toast-link-color: var(--bs-success-text-emphasis);
}