Changing background color of app with dynami theming

Question

I have custom theming in Angular Material which looks:

@import '~@angular/material/theming';

@include mat-core();

/* ======== angular material custom theme ======== */
$my-custom-primary: mat-palette($mat-blue, 800, 900, A100);
$my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
$my-custom-warn: mat-palette($mat-lime);

// Light theme
$my-custom-light-theme: mat-light-theme($my-custom-primary, $my-custom-accent, $my-custom-warn);
@include angular-material-theme($my-custom-light-theme);

$my-custom-dark-theme: mat-dark-theme($my-custom-primary, $my-custom-accent, $my-custom-warn);

// Dark theme
.dark-theme {
    color: $light-primary-text;
    @include angular-material-theme($my-custom-dark-theme);
}

//@include angular-material-theme($my-custom-dark-theme);

// Alternate Angular Material Theme
.my-alternate-theme {
    $my-alternate-primary: mat-palette($mat-red);
    $my-alternate-accent: mat-palette($mat-green, 400);
    $my-alternate-warn: mat-palette($mat-grey);

    $my-alternate-theme: mat-light-theme($my-alternate-primary, $my-alternate-accent, $my-alternate-warn);
    @include angular-material-theme($my-alternate-theme);
}

and dynamic switcher in app.component:

<div class="mat-app-background" [class.dark-theme]="theme.isDark()">
    <router-outlet></router-outlet>
</div>

but when changing to dark theme the background color is still white - it does not change whether I set mat-app-background class on div section. Do you know which way should I follow to change this background color?

Answer 1

Try this :-

Working Stackblitz :- https://stackblitz.com/edit/angular-scss-demo-expsck

<div id="parentContainer" class="mat-app-background" [ngClass]="{'dark-theme': theme.isDark(), 'mat-app-background': true}">
    <router-outlet></router-outlet>
</div>

Also by default body or any div takes height as per its content, if you want to treat it as whole height and width of browser. Add this css :-

 #parentContainer{
     height: 100vh;
     body: 100vw;
     overflow: auto;
  }