Question

我在Angular材质主题上遇到问题，无法更改所有组件的主题。问题是，如果我不在app.module.ts的构造函数中使用overlayContainer，则对话框始终为浅色，但是如果使用它，则对话框始终为深色。我想要的是如果我选择浅色主题，则包括菜单和对话框在内的所有内容都应浅色且仅当我选择深色主题时才应为深色。我遵循了https://material.angular.io/guide/theming#multiple-themes

中的教程

我的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>

Answer 1

最后，我能够解决我的问题。我将其发布在这里，以便对其他人有帮助，现在我根据事件设置了overlayContainer。

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

Angular材质主题问题

1 个答案: