Stylize Lightning Confirm, Lightning Alert, Lightning Prompt with Theme Property

Hello There, In this post, let us understand how you can change the color of Lightning Confirm, Lightning Alert, or Lightning Prompt with the help of their theme property in the Lightning web component.

This is helpful when you have requirements like below.

• Show Lightning Confirm to delete a record with red color.
• Show warnings with an orange color prompt.
• Prompt user with Lightning Prompt with green color prompt window.

The theme properties of Lightning Confirm, Lightning Alert, and Lightning Prompt support the below values.

• default: white
• shade: gray
• inverse: dark blue
• alt-inverse: darker blue
• success: green
• info: grayish-blue
• warning: yellow
• error: red
• offline: ​black​

With the help of the theme property you can set different colors for the Lightning Confirm, Alert, and Prompt dialogs.

For more information about themes you can refer to: SLDS Themes CSS Classes. To use custom colors you can use the Global Color Styling Hooks. Here I have also covered How to use SLDS Styling hooks.

Changing the color of Lightning Alert

The below code shows Lightning Alert with the red color theme i.e. error.

async handleErrorAlertClick() {
	await LightningAlert.open({
		message: "Add your error message here!",
		theme: "error",
		label: "Error!"
	});
}

See the full example: Create an Alert using LightningAlert LWC

Changing the color of Lightning Prompt

The below code creates a Lightning Prompt window with the green color theme i.e. success.

handlePromptClick() {
	LightningPrompt.open({
		message: "this is the prompt message",
		theme: "success", // defaults to "default"
		label: "Please Respond", // this is the header text
		defaultValue: "initial input value" //this is optional
	}).then((value) => {
		if (value) {
			// do something with the value
			this.handleSuccessAlertClick(value);
		} else {
			this.handleErrorAlertClick();
		}
	});
}

See the full example: Create a Prompt using LightningPrompt LWC.

Changing the color of Lightning Confirm

The below code creates a confirm dialog with a yellow color warning theme i.e. warning.

async handleConfirmClick() {
    const result = await LightningConfirm.open({
        message: "Are you sure you want to delete this?",
        variant: "default", // headerless
        label: "Delete a record",
	theme: "warning"
    });

    //Confirm has been closed

    //result is true if OK was clicked
    if (result) {
        //go ahead and delete
    } else {
        //do something else 
    }
}

See the full example: Create a Confirm dialog using LightningConfirm LWC