Issue with Angular material theme

Question

I am having issue with the Angular material theme where I am unable to change the theme for all components. The problem is if I don't use overlayContainer in constructor of app.module.ts, the dialog box are always light color, but if I use it then dialog box are always dark. What I want is if I choose light theme, everything including menu and dialog should be light and should be dark only If I choose dark theme. I followed the tutorial from https://material.angular.io/guide/theming#multiple-themes

My theme.scss is:

@import "~@angular/material/theming";

@include mat-core();

  $primary: mat-palette($mat-red);
  $accent: mat-palette($mat-amber, A200, A100, A400);
  $warn: mat-palette($mat-red);
  $light-theme: mat-light-theme((
    color:(
      primary: $primary,
      accent: $accent,
      warn: $warn)
  ));
  @include angular-material-theme($light-theme);


$dark-primary : mat-palette($mat-red);
$dark-accent: mat-palette($mat-green, A400, A100, A700);
$dark-warn: mat-palette($mat-red);
$dark-theme: mat-dark-theme((
  color:(
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn)
));

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

app.module.ts

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

app.component.html

<div [ngClass]="{'app-dark-theme' : isDarkTheme | async} ">
    <app-home></app-home>
</div>

Ashish Ashish · Accepted Answer · 2020-10-23T19:10:27

Finally I was able to fix my issue. I am posting it here so that it can be helpful to someone else, now I am setting overlayContainer based on the event.

ngOnInit(): void {
    this.isDarkTheme = this.themeService.isDarkTheme;
    this.themeService.isDarkTheme.subscribe(value => {
      if(value === true){
        this.overlayContainer.getContainerElement().classList.add('app-dark-theme');
      }else{
       this.overlayContainer.getContainerElement().classList.remove('app-dark-theme');
      }
    });
  }

Issue with Angular material theme

1 Answers