title: Angular Material coloring app background dynamically does not work
body: <p>I'm trying to achieve that the background of my app is a color defined by the currently used theme. This does not really work.</p>
  
  <p>What I've tried: <a href="https://stackoverflow.com/questions/43919927/angular-material2-theming-how-to-set-app-background">Angular Material2 theming - how to set app background?</a>. I've tried to use the accepted solution of this posting but for me only the background of all components is set and gets overwritten by the theme. I don't know how to handle it. </p>
  
  <p>How it looks like (white part with no content should be dark as well):
  <a href="https://i.stack.imgur.com/EuFBk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EuFBk.png" alt="enter image description here"></a></p>
  
  <p>I've copied the theming action like in this tutorial and everything works fine there: <a href="https://medium.com/grensesnittet/dynamic-themes-in-angular-material-b6dc0c88dfd7" rel="nofollow noreferrer">https://medium.com/grensesnittet/dynamic-themes-in-angular-material-b6dc0c88dfd7</a></p>
  
  <p>app.component.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div
    [ngClass]="{'default-theme': (selectedTheme | async) === 'default-theme', 'dark-theme': (selectedTheme | async) === 'dark-theme', 'light-theme': (selectedTheme | async) === 'light-theme', 'nature-theme': (selectedTheme | async) === 'nature-theme'}"&gt;
    &lt;div class="mat-app-background"&gt;
      &lt;app-header&gt;&lt;/app-header&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>index.html:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body class="mat-app-background"&gt;
    &lt;app-root&gt;
    &lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>material-theme.scss:</p>
  
  <pre class="lang-css prettyprint-override"><code>@import "~@angular/material/theming";
  @import "./component-themes";
  
  @include mat-core();
  
  $primary: mat-palette($mat-indigo);
  $accent: mat-palette($mat-pink, A200, A100, A400);
  $warn: mat-palette($mat-red);
  $theme: mat-light-theme($primary, $accent, $warn);
  
  @include angular-material-theme($theme);
  @include component-themes($theme);
  
  .dark-theme {
    color: $light-primary-text;
    $dark-primary: mat-palette($mat-grey, 700, 300, 900);
    $dark-accent: mat-palette($mat-blue-grey, 400);
    $dark-warn: mat-palette($mat-red, 500);
    $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
    $bp: mat-palette($mat-red);
  
    @include angular-material-theme($dark-theme);
    @include component-themes($dark-theme);
  }
  </code></pre>
  
  <p>styles.scss:</p>
  
  <pre class="lang-css prettyprint-override"><code>@import "./material-theme";
  @import "~@angular/material/theming";
  
  body {
    margin: 0;
    font-family: Roboto, sans-serif;
    // background-color: mat-color($bp);
  }
  </code></pre>
  
  <p>Themes are set through the app-component.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>  ngOnInit(): void {
      this.themeService.setTheme(localStorage.getItem("theme"));
      this.selectedTheme = this.themeService.theme;
      this.selectedTheme.subscribe(data =&gt; {
        const overlayContainerClasses = this.overlayContainer.getContainerElement()
          .classList;
        const themeClassesToRemove = Array.from(
          overlayContainerClasses
        ).filter((item: string) =&gt; item.includes("-theme"));
        if (themeClassesToRemove.length) {
          overlayContainerClasses.remove(...themeClassesToRemove);
        }
        overlayContainerClasses.add(data);
      });
    }
  </code></pre>
  
  <p>So what is the best approach to get it done?</p>