Angular 角度材料主题问题

Angular 角度材料主题问题,angular,angular-material,Angular,Angular Material,我对“角度材质”主题存在问题,无法更改所有组件的主题。问题是,如果我没有在app.module.ts的构造函数中使用OverlyContainer,对话框总是浅颜色的,但如果我使用它,则对话框总是暗的。我想要的是,如果我选择了光明的主题,包括菜单和对话框的一切都应该是光明的,应该是黑暗的,只有当我选择黑暗的主题。我从一开始就学习了教程 我的theme.scss是: @import "~@angular/material/theming"; @include mat-core

我对“角度材质”主题存在问题,无法更改所有组件的主题。问题是,如果我没有在app.module.ts的构造函数中使用OverlyContainer,对话框总是浅颜色的,但如果我使用它,则对话框总是暗的。我想要的是,如果我选择了光明的主题,包括菜单和对话框的一切都应该是光明的,应该是黑暗的,只有当我选择黑暗的主题。我从一开始就学习了教程

我的theme.scss是:

@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>

我终于解决了我的问题。我把它贴在这里是为了对其他人有所帮助,现在我正在根据事件设置OverlyContainer

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