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

}