title: Background color does not switch between light and dark themes in Angular material 2
body: <p>I have an Angular 4 app using Material 2 (current version, 2.0.0-beta.11).</p>
  
  <p>I have followed the <a href="https://github.com/angular/material2/blob/master/guides/theming.md" rel="noreferrer">documentation</a> for theming and created two themes, a light theme and a dark theme. Since I do not use a md-sidenav component, I have put the <code>mat-app-background</code> class on the body element, which applies the current theme's background color (a light grey for a light theme, and a dark grey for a dark theme.)</p>
  
  <p>The problem is that when my theme switcher is toggled (a simple button that adds or removes a class, nothing fancy, <a href="https://stackoverflow.com/questions/42481704/angular-material-2-switch-theme-from-light-to-dark-on-click">like this answer</a>), the background color from the <code>mat-app-background</code> is not updated.</p>
  
  <p>I am unable to create a plunker that successfully uses custom themes, but here's the basic gist:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;body class="mat-app-background"&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;main [class.dark-theme]="isDarkTheme"&gt;
    &lt;button md-raised-button color="primary" (click)="toggleTheme()"&gt;Toggle&lt;/button&gt;
    &lt;!-- other content --&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>isDarkTheme: boolean = false;
  toggleTheme() { this.isDarkTheme = !this.isDarkTheme; }
  </code></pre>
  
  <p>theme.scss</p>
  
  <pre><code>@import '~@angular/material/theming';
  @include mat-core();
  
  // light (default) theme
  $lt-primary: mat-palette($mat-indigo);
  $lt-accent:  mat-palette($mat-pink, A200, A100, A400);
  $lt-theme:   mat-light-theme($lt-primary, $lt-accent);
  @include angular-material-theme($lt-theme);
  
  // alternate dark theme
  $dark-primary: mat-palette($mat-blue-grey);
  $dark-accent:  mat-palette($mat-amber, A200, A100, A400);
  $dark-warn:    mat-palette($mat-deep-orange);
  $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
  
  .dark-theme {
    @include angular-material-theme($dark-theme);
  }
  </code></pre>
  
  <p>When I click the button, it successfully toggles the theme: the class is applied, the button changes color from the light theme primary color to the dark theme primary color. But the background color remains the light theme's background color.</p>
  
  <p><strong>The default background color "sticks" and is unaffected by the theme switch.</strong> What am I missing? Is there a way for the background color to be <strong>automatically</strong> updated without a mixin/manual redefinition?</p>
  
  <p>(Note: clean angular cli project, using the themes copy pasted directly from the angular material documentation. Angular 4.4.4, material 2.0.0-beta.11.)</p>