Angular material 5 dark theme not applied to body
if you add angular material after your project has started, you simply have to manually add mat-app-background class to your body element in your index.html as below:
<body class="mat-typography mat-app-background">
...
</body>
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:
Late in the game, but try to set height to 100%. This is what fixed it for me. Here dark-theme is a global class that has my Angular Material dark theme in it. I put this HTML in app.component.html.
<div class="mat-app-background dark-theme" style="height: 100%;">
<app-root></app-root>
</div>
This was using Angular 9.
Only vh-100 mat-app-background
in app.component.html
<div class="vh-100 mat-app-background">
<router-outlet></router-outlet>
</div>