To change the background color of a mat dialog in Angular, you can take the help of a panel class. This can be done in two steps.
Step 1: In your ts file wherever you are calling the dialog component, create a custom panel class inside the matDialogConfig object. You can name it whatever you want.
const dialogRef = this.dialog.open(MyDialogComponent,{
width:'600px',
height:'350px',
panelClass: 'my-class' // Aad a custom panel class
});
Step 2: Now put this panel class inside your global styles.css file and change the background color to whatever color you want.
.my-class .mat-dialog-container{
background-color: violet ;
/* Other CSS Styles */
}
Change the Background Color of All Mat Dialogs Globally
The above method only changes the background color of a single mat dialog to which we have added a custom panel class. The other mat dialogs will not be affected by these CSS styles.
If you want to keep the background color of all the mat dialogs exactly the same, you can do it by adding styles to the mat-dialog-container selector inside your global styles.css file.
But, these global styles will not work until you have added the !important rule. Once you add the !important rule, it overrides all existing CSS styles.
Add the below styles inside your styles.css file:
mat-dialog-container{
background-color: violet !important;
/* Other CSS Styles */
}
