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

…ar#13065)

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.

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;
   }
 
   /**