Angular w/ Angular Material - Dialog theme broken

The issue is in your material2-app-theme.scss theme file:

.app-dark-theme {
  @include angular-material-theme($dark-theme);
}

This is known as a mixin in Sass. When written this way, the theme would only apply to elements with the class .app-dark-theme.

Removing the class and just leaving:

@include mat-core();

$primary: mat-palette($mat-brown, 400);
$accent:  mat-palette($mat-yellow, 100);
$warn:    mat-palette($mat-deep-orange);
$dark-theme:   mat-dark-theme($primary, $accent, $warn);


@include angular-material-theme($dark-theme);

applies the theme to your whole app. By the looks of it, that means you can take out a hefty chunk of the css that's currently in there.

Also note: the first line in the dialog container isn't wrapped by any tags other than the parent div so there's no font styling applied to it. Material gives several convenience directives to help with dialog styling, e.g. <h2 mat-dialog-title>Dialog Title!</h2>

Since you have your theme inside a style class, you need to add that to global overlay container.

Here is how, in your AppModule:

import {OverlayContainer} from '@angular/cdk/overlay';

@NgModule({
      // ...
})
export class AppModule {
      constructor(overlayContainer: OverlayContainer) {
          overlayContainer.getContainerElement().classList.add('app-dark-theme');
      }
}

Link to official documentation: https://material.angular.io/guide/theming#multiple-themes

---

UPDATE: For dynamically changing the theme:

import { OverlayContainer } from '@angular/cdk/overlay';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

constructor(
  private _overlayContainer: OverlayContainer
) { }

changeTheme(theme: 'app-theme-dark' | 'app-theme-light'): void {
  // remove old theme class and add new theme class
  const overlayContainerClasses = this._overlayContainer.getContainerElement().classList;
  const themeClassesToRemove = Array.from(overlayContainerClasses)
    .filter((item: string) => item.includes('app-theme-'));
  if (themeClassesToRemove.length) {
    overlayContainerClasses.remove(...themeClassesToRemove);
  }
  overlayContainerClasses.add(theme);
}