Используйте разные темы в зависимости от маршрута / компонента

Question

Я пытаюсь использовать одну тему во всем приложении, кроме одной страницы, на которой я хотел бы загрузить другую тему.

Пока в моем main.scss я включаю основную тему

@import '~@angular/material/theming';
@include mat-core();

$myapp-primary: mat-palette($mat-light-green, 50);
$myapp-accent:  mat-palette($mat-light-green);

$myapp-light-theme: mat-light-theme($myapp-primary, $myapp-accent);
$myapp-dark-theme: mat-dark-theme($myapp-primary, $myapp-accent);

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

Как видите, я объявил темы: $myapp-light-theme и $myApp-dark-theme и использует $myapp-light-theme в качестве основной.То, что я пытался сделать, чтобы переключить тему в моем home.component (загруженном в <router-outlet></router-outlet>), это поместить следующий код в стиль компонентов (home.component.scss):

@import '~@angular/material/theming';
@import "../../styles/angular-material-theme";
@include angular-material-theme($myapp-dark-theme);

Но это не сработало какЯ бы ожидал.Возможно ли даже то, чего я пытаюсь достичь?

Answer 1

Решение состоит в том, чтобы превратить пользовательскую тему в дополнительный класс:

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

Внутри компонента, на котором я хочу включить пользовательскую тему:

  constructor(private overlayContainer: OverlayContainer, @Inject(DOCUMENT) private document: Document) {
    overlayContainer.getContainerElement().classList.add('dark-theme');
    document.body.classList.add('dark-theme');
  }

  public ngOnDestroy(): void {
    this.document.body.classList.remove('dark-theme');
    this.overlayContainer.getContainerElement().classList.remove('dark-theme');
  }