Can We Apply Custom Colors to a ShowToastEvent

csslightning-web-componentssldsslds-styling-hookstoast

I need to drop a simple LWC onto an existing Lightning Record page which just queries for some specific conditions between parent and child data, and if conditions are met, displays a toast message at the top of the lightning record page.

The Platform Show Toast Event LWC allows us to import lightning/platformShowToastEvent and then dispatch a ShowToastEvent with variants of info (gray), success (green), warning (orange), and error (red). This works as expected and the toast appears outside of the LWC, at the top of the record page. The documentation also says:

Toasts inherit styling from toasts in the Lightning Design System.

The Toast component blueprint within SLDS provides examples to create your own custom Toast within an LWC instead of firing the Toast event in Lightning.

It also has a section that discusses Custom CSS Properties as Styling Hooks to customize toast components with our own style.

However, I cannot figure out how/if it is possible to combine these two things together. My ideal solution would be an LWC that dispatches the ShowToastEvent to display a toast at the top of the page (not contained within the LWC itself), but have that Toast event use a custom background and text color.

So far it seems that I can either use ShowToastEvent, but only with one of the 4 color variants, or I can build my own custom toast within the LWC HTML which I can style colors on, but in that case, the toast will be contained within the boundaries of the LWC itself instead of prompting at the top of the record page.

Is there something I am missing, or are these the only two options that exist today?

Example Code:

MyToastComponent.html:

<template>
</template>

MyToastComponent.js:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class KnowledgeCategoryNotice extends LightningElement {
    connectedCallback() {
        const toastEvent = new ShowToastEvent({
            title: 'Toast Title',
            message:
                'Toast Message',
            mode: 'sticky',
        });
        this.dispatchEvent(toastEvent);
    }
}

MyToastComponent.css:

.slds-notify_container {
    --slds-c-toast-color-background: purple; /* Does Not Work */
}

.slds-notify {
    --slds-c-toast-color-background: purple; /* Does Not Work */
}

.slds-notify_toast {
    --slds-c-toast-color-background: purple; /* Does Not Work */
}

Best Answer

You need to inspect the toast yourselves as the css variables could differ based on the toast variants. For example the success variant can be styled as follows.

--slds-g-color-success-base-50: purple;

It should be enough to define those in the lwc .css file, if not then you will have to load an external css file.

enter image description here

enter image description here

Related Topic