Angular 角度材料主题问题
我对“角度材质”主题存在问题,无法更改所有组件的主题。问题是,如果我没有在app.module.ts的构造函数中使用OverlyContainer,对话框总是浅颜色的,但如果我使用它,则对话框总是暗的。我想要的是,如果我选择了光明的主题,包括菜单和对话框的一切都应该是光明的,应该是黑暗的,只有当我选择黑暗的主题。我从一开始就学习了教程 我的theme.scss是:Angular 角度材料主题问题,angular,angular-material,Angular,Angular Material,我对“角度材质”主题存在问题,无法更改所有组件的主题。问题是,如果我没有在app.module.ts的构造函数中使用OverlyContainer,对话框总是浅颜色的,但如果我使用它,则对话框总是暗的。我想要的是,如果我选择了光明的主题,包括菜单和对话框的一切都应该是光明的,应该是黑暗的,只有当我选择黑暗的主题。我从一开始就学习了教程 我的theme.scss是: @import "~@angular/material/theming"; @include mat-core
@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>
我终于解决了我的问题。我把它贴在这里是为了对其他人有所帮助,现在我正在根据事件设置OverlyContainer
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');
}
});
}