Я пытаюсь добиться того, чтобы фон моего приложения был цветом, определенным текущей используемой темой. Это на самом деле не работает.
Что я пробовал: Angular Тематика Material2 - как установить фон приложения? . Я попытался использовать принятое решение этой публикации, но для меня только фон всех компонентов установлен и перезаписывается темой. Я не знаю, как справиться с этим.
Как это выглядит (белая часть без содержимого также должна быть темной): 
Я скопировал действие тем как в этом уроке и там все отлично работает: https://medium.com/grensesnittet/dynamic-themes-in-angular-material-b6dc0c88dfd7
app.component. html:
<div
[ngClass]="{'default-theme': (selectedTheme | async) === 'default-theme', 'dark-theme': (selectedTheme | async) === 'dark-theme', 'light-theme': (selectedTheme | async) === 'light-theme', 'nature-theme': (selectedTheme | async) === 'nature-theme'}">
<div class="mat-app-background">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
</div>
index. html:
<body class="mat-app-background">
<app-root>
</app-root>
</body>
material-theme.s css:
@import "~@angular/material/theming";
@import "./component-themes";
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include component-themes($theme);
.dark-theme {
color: $light-primary-text;
$dark-primary: mat-palette($mat-grey, 700, 300, 900);
$dark-accent: mat-palette($mat-blue-grey, 400);
$dark-warn: mat-palette($mat-red, 500);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
$bp: mat-palette($mat-red);
@include angular-material-theme($dark-theme);
@include component-themes($dark-theme);
}
styles.s css:
@import "./material-theme";
@import "~@angular/material/theming";
body {
margin: 0;
font-family: Roboto, sans-serif;
// background-color: mat-color($bp);
}
Темы задаются через app-component.ts:
ngOnInit(): void {
this.themeService.setTheme(localStorage.getItem("theme"));
this.selectedTheme = this.themeService.theme;
this.selectedTheme.subscribe(data => {
const overlayContainerClasses = this.overlayContainer.getContainerElement()
.classList;
const themeClassesToRemove = Array.from(
overlayContainerClasses
).filter((item: string) => item.includes("-theme"));
if (themeClassesToRemove.length) {
overlayContainerClasses.remove(...themeClassesToRemove);
}
overlayContainerClasses.add(data);
});
}
Итак, каков наилучший подход для этого?