Angular w/ Angular Material - Dialog theme broken

Question

Hello i'm having an issue with Angular Material theme breaking in a Dialog Component, where the color of text and other components aren't working in the ways they should.

In app.component I have a setting icon button to open a dialog main.settings.dialog but when it opens as seen in the picture below the coloring is not fitting the Dark Theme.

Any insight as to why this isn't working in a normal way would be greatly appreciated as i can't find a way to fix this.

Live example site

Link to full source code

Answer 1

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);
}

Answer 2

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>