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:

Before

After:

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>

Tags:

Angular

Angular Material

Angular Cdk

Recent Posts