I need to change the colors theme of my app according to a parameter and it should be a very simple operation. In my app I use a Fuse angular material theme. When I try to switch from the primary to the secondary theme, the accent color of the dialog component does not change while the other components (for example the navigation bar) do.
_theme.scss
@import '~@angular/material/theming';
@import './component-themes';
$primary: mat-palette($mat-fusedark);
$accent: mat-palette($mat-light-blue, 600, 400, 700);
$warn: mat-palette($mat-red);
$white: mat-palette($mat-white);
$black: mat-palette($mat-black);
$first-theme: mat-light-theme($primary, $accent, $warn);
$background: map-get($first-theme, background);
$foreground: map-get($first-theme, foreground);
@include angular-material-theme($first-theme);
@include component-themes($first-theme);
$second-primary: mat-palette($mat-fusedark);
$second-accent: mat-palette($mat-green, 600, 400, 700);
$second-warn: mat-palette($mat-red);
$second-theme: mat-light-theme($second-primary, $second-accent, $second-warn);
.second-theme {
@include angular-material-theme($second-theme);
@include component-themes($second-theme);
}
component-theme.scss
@import "../partials/navigation";
@import "../partials/dialog";
@mixin component-themes($theme) {
@include navigation-theme($theme);
@include dialog-theme($theme);
}
_dialog.scss
@import '~@angular/material/theming';
@mixin dialog-theme($theme) {
$accent: map-get($theme, accent);
.dialog-wrapper {
.mat-dialog-container {
padding: 0;
overflow: hidden;
}
.mat-dialog-title {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
margin: 0;
padding: 24px;
}
.mat-toolbar {
background-color: mat-color($accent) !important;
}
.mat-dialog-content {
padding: 16px 32px 0px;
margin: 0;
}
.mat-dialog-actions {
display: flex;
flex: 1 1 auto;
margin: 1px 0 0 0;
padding: 0px 32px 16px;
}
}
}
If I change in the _dialog.scss the value
background-color: mat-color($accent) !important;
into
background-color: green !important;
it works properly. It looks like mat-color($accent)
does not work but only for the scss of this component.
For who runs into this problem, I have finally found a solution. I could not change the theme of some components because they are nested and the overlay container blocks the theme propagation. In order to fix it, I imported the overlayContainer and add the theme class into the overlayContainer in the ngOnInit method.
import {OverlayContainer} from '@angular/cdk/overlay';
constructor(
private overlayContainer: OverlayContainer
) {}
ngOnInit() {
if (this.data.theme === 'second-theme') {
this.overlayContainer.getContainerElement().classList.add(this.data.theme);
}
}
Very easy solution when you know what is the problem, the hard part was to find it out:)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.