Angular主题混合无法更改颜色和其他属性

Question

我在这里有些挣扎，当我切换到dark-theme时，background-color不会改变。我查看了几个示例并尝试了其他实现，但没有任何效果。我在这里错了吗？

运行示例：https://stackblitz.com/edit/angular-theme-light-dark

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

@include mat-core();

$light-primary: mat-palette($mat-green);
$light-accent: mat-palette($mat-orange, A200, A100, A400);
$light-warn: mat-palette($mat-red);
$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

$dark-primary: mat-palette($mat-blue-grey);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

@mixin custom-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);

  body {
    background-color: mat-color($accent);
  }
}

@include angular-material-theme($light-theme);
@include custom-theme($light-theme);

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

Answer 1

Element.classList是只读属性

 constructor(private overlay: OverlayContainer, private renderer:Renderer2) {}

toggleTheme(): void {
this.isDarkTheme = !this.isDarkTheme;

if (this.isDarkTheme) {
  this.overlay.getContainerElement().classList.add('dark-theme');
  this.renderer.addClass(document.body,'dark-theme');
} else {
  this.overlay.getContainerElement().classList.remove('dark-theme');
   this.renderer.removeClass(document.body,'dark-theme');
}

}