Angular material 5 dark theme not applied to body
I've created a "custom" theme, (using the theming documentation at https://material.angular.io/guide/theming, which is pretty bad) like this:
@import '~@angular/material/theming';
@include mat-core();
$ip-primary: mat-palette($mat-indigo);
$ip-accent: mat-palette($mat-pink, A200, A100, A400);
$ip-theme: mat-light-theme($ip-primary, $ip-accent);
$ip-theme-dark: mat-dark-theme($ip-primary, $ip-accent);
.indigo-pink {
@include angular-material-theme($ip-theme);
}
.indigo-pink-dark {
@include angular-material-theme($ip-theme-dark);
}
My index.html contains this:
<body class="mat-app-background mat-typography">
<app-root></app-root>
</body>
In the container for the app-root component, I switch between my custom class names (indigo-pink and indigo-pink-dark) using this:
<div [ngClass]="appTheme">
I am also setting the CDK overlay container class to my custom class name using this:
setContainerClass(className: string): void {
const containerClassToKeep = 'cdk-overlay-container';
const overlayClassList = this.overlayContainer.getContainerElement().classList;
const existingClasses = Array.from(overlayClassList);
existingClasses.forEach(classToken => {
if (classToken !== containerClassToKeep) {
overlayClassList.remove(classToken);
}
});
overlayClassList.add(className);
}
The main problem is that when I switch into the dark theme, I do see the indigo-pink-dark class name get added to my app component container correctly, but only some styles change (e.g. the toolbar at the top goes dark, and Material components) - the body of the page stays white. The theming guide (and other blog posts) say that using the mat-app-background should fix this exact problem.
Additionally though, if I try manually update the background-color of the body, using e.g.
.indigo-pink-dark {
@include angular-material-theme($ip-theme-dark);
body & {
background-color: #000;
}
}
Then this "background-color" just overlays the entire page and you cannot see any elements on the page. This is something to do with the CDK overlay, because if I remove the part that adds the class name to the overlay, it kind of works - the background of the page does get set correctly, but then overlays do not get correct styling.
Answer
I had the same issue and found this solution on the Angular Material GitHub issue#3298 (post by JamieStill).
I wrapped all of my app.component.html content in a div
<div class="mat-typography app-frame mat-app-background">
<app-header></app-header>
<main>
<app-post-create></app-post-create>
<app-post-list></app-post-list>
</main>
</div>
And in app.component.css
html, body, app-root, .app-frame {
overflow: hidden;
margin: 0;
height: 100%;
box-sizing: border-box;
color: #e0e0e0;
}
I've only tested this in a practice app in Angular 6, but I suspect it will work in Angular 5 as well.
Before:
After:
