Angular 5 and material - How to change the background color from SnackBar component

You have to use the panelClass option (since v6) to apply classes on a snackbar like this:

this.snackBar.open(message, action, {
  duration: 2000,
  panelClass: ['blue-snackbar']
});

CSS (in global styles.scss):

.blue-snackbar {
  background: #2196F3;
}

See the Stackblitz example

Using themes:

Primary:

this.snackBar.open('Some message','Some action', {
    duration: 2000,
    panelClass: ['mat-toolbar', 'mat-primary']
});

Switch: 'mat-primary' to 'mat-accent' or 'mat-warn'

//in component.ts
this.snackbar.open(message, '', {
    duration: 2000,
    verticalPosition: 'top',
    panelClass: ['warning']
 });
//in component.css
::ng-deep .warning{
   background: 'yellow';
}