Angular Material : Change background color of a dialog window

Question

I don't know why but my dialog is black (#424242) insteed of white (by default) and this is the same for my datatable.

And overwriting the CSS does not work. Have you any idea for change the backgroundcolor by default or just change the color?

Solution 1

If you want to do it with css then there are 2 ways.

1. Using component.css file

Write ::ng-deep <selector> in your component.css file to overwriting the css applied by material.

2. Using style.css file

if you write your css in style.css that exists in root folder of angular project then you dont have to add ::ng-deep in front of your selectors.

Solution 2

F12 Debug on Browser, you will see mat-dialog-container tag doesn't belong to app-root. so you have to change CSS of mat-dialog-container globally in styles.scss file:

mat-dialog-container {
   background-color: greenyellow !important;
}

another way is changing Material theme globally in styles.scss.

if you want to change background color different for dialogs, set background color of = transparency. then set background color for dialog component.

styles.scss:

mat-dialog-container {
  background-color: transparent !important;
  padding: 0px 0px 0px 0px !important;
  overflow: hidden !important;
}

Solution 3

Prefer to avoid ::ng-deep as it is deprecated.

Keep a global stylesheet. If it's splitted into multiple stylesheets make sure your stylesheet where you override material component themes comes in a later order.

This will result in overriding material classes otherwise you will still see color from the material dark background. I did this silly mistake of imports.

I added this in one of my root level scss file for dialogue. ($grey is my own version)

mat-dialog-container {
   background: $grey !important;
}

NOTE:

'!important'

is important here :)