fix(dialog,bottom-sheet): invert backdrop color on dark themes

Similarly to how we handle the sidenav backdrop and ripples, these changes invert the color for the dialog and bottom sheet backdrops in dark themes.

Author: crisbeto

src/dev-app/dialog/dialog-demo.ts

@@ -28,7 +28,7 @@ export class DialogDemo {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
     hasBackdrop: true,
-    backdropClass: '',
+    backdropClass: defaultDialogConfig.backdropClass,
     width: '',
     height: '',
     minWidth: '',

src/lib/bottom-sheet/_bottom-sheet-theme.scss

@@ -5,12 +5,17 @@
 @mixin mat-bottom-sheet-theme($theme) {
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+  $backdrop-color: invert(mat-color($background, card, 0.288));
 
   .mat-bottom-sheet-container {
     @include _mat-theme-elevation(16, $theme);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
+
+  .mat-bottom-sheet-backdrop {
+    background: $backdrop-color;
+  }
 }
 
 @mixin mat-bottom-sheet-typography($config) {

src/lib/bottom-sheet/bottom-sheet-config.ts

@@ -32,7 +32,7 @@ export class MatBottomSheetConfig<D = any> {
   hasBackdrop?: boolean = true;
 
   /** Custom class for the backdrop. */
-  backdropClass?: string;
+  backdropClass?: string = 'mat-bottom-sheet-backdrop';
 
   /** Whether the user can use escape or clicking outside to close the bottom sheet. */
   disableClose?: boolean = false;

src/lib/dialog/_dialog-theme.scss

@@ -7,12 +7,17 @@
 @mixin mat-dialog-theme($theme) {
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
+  $backdrop-color: invert(mat-color($background, card, 0.288));
 
   .mat-dialog-container {
     @include _mat-theme-elevation(24, $theme);
     background: mat-color($background, dialog);
     color: mat-color($foreground, text);
   }
+
+  .mat-dialog-backdrop {
+    background: $backdrop-color;
+  }
 }
 
 @mixin mat-dialog-typography($config) {

src/lib/dialog/dialog-config.ts

@@ -54,7 +54,7 @@ export class MatDialogConfig<D = any> {
   hasBackdrop?: boolean = true;
 
   /** Custom class for the backdrop, */
-  backdropClass?: string = '';
+  backdropClass?: string = 'mat-dialog-backdrop';
 
   /** Whether the user can use escape or clicking on the backdrop to close the modal. */
   disableClose?: boolean = false;

src/lib/dialog/dialog.ts

@@ -189,7 +189,7 @@ export class MatDialog implements OnDestroy {
    * @returns The overlay configuration.
    */
   private _getOverlayConfig(dialogConfig: MatDialogConfig): OverlayConfig {
-    const state = new OverlayConfig({
+    const overlayConfig = new OverlayConfig({
       positionStrategy: this._overlay.position().global(),
       scrollStrategy: dialogConfig.scrollStrategy || this._scrollStrategy(),
       panelClass: dialogConfig.panelClass,
@@ -203,10 +203,10 @@ export class MatDialog implements OnDestroy {
     });
 
     if (dialogConfig.backdropClass) {
-      state.backdropClass = dialogConfig.backdropClass;
+      overlayConfig.backdropClass = dialogConfig.backdropClass;
     }
 
-    return state;
+    return overlayConfig;
   }
 
   /**