Enhance the appearance of dialogs and other overlays by introducing a new theme class to the overlay. Here are two themes to choose from, with the second theme activated by adding the 'alternate-theme' class to the root node.
@import '~@angular/material/theming';
@include mat-core();
$primary-palette: mat-palette($mat-pink, A200, 900, 50);
$accent-palette: mat-palette($mat-light-blue, 500, 900, A100);
$warn-palette: mat-palette($mat-red, 700, 900, A100);
$basic-theme: mat-dark-theme($primary-palette, $accent-palette,
$warn-palette);
@include angular-material-theme($basic-theme);
$alt-primary-palette: mat-palette($mat-teal);
$alt-accent-palette: mat-palette($mat-pink, 600);
$alt-warn-palette: mat-palette($mat-amber, 700, 900, A100);
.alternate-theme {
$alternate-primary: $alt-primary-palette;
$alternate-accent: $alt-accent-palette;
$alternate-warn: $alt-warn-palette;
$alternate-theme: mat-light-theme($alternate-primary, $alternate-accent, $alternate-warn);
@include angular-material-theme($alternate-theme);
}
However, some Angular components like dialogs are treated differently. To apply the 'alternate-theme' class to such overlays, you can do this:
constructor(private overlay: OverlayContainer) {}
Then, when switching themes:
switchTheme(theme: string) {
if (theme === 'light') {
this.overlay.getContainerElement().classList.add('alternate-theme');
} else {
this.overlay.getContainerElement().classList.remove('alternate-theme');
}
}