Angular Material2 theming - how to set app background? : <p>I am building an angular2 app using angular material2. I am trying to set the background of my application "the correct way", but I can't figure out how.</p>

<p>I found a class I can use on my <code>&lt;body&gt;</code> element: <code>mat-app-background</code> which I can add, that gives me a default color (depending on whether I'm using the light or dark themes).</p>

<p>I wish to define this background color to use my brands' color, but I cannot figure out how to do it.</p>

<p>In <code>_theming.scss</code> it is defined like so:</p>

<pre><code>// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme) {
  @include mat-ripple-theme($theme);
  @include mat-option-theme($theme);
  @include mat-pseudo-checkbox-theme($theme);

  // Wrapper element that provides the theme background when the
  // user's content isn't inside of a `md-sidenav-container`.
  .mat-app-background {
    $background: map-get($theme, background);
    background-color: mat-color($background, background);
  }
  ...
}
</code></pre>

<p>So I thought it would make sense to try adding the background color to my custom theme, somehow, but I couldn't understand how to do so.</p>

<p>On the Material2 <a href="https://github.com/angular/material2/blob/master/guides/theming.md" rel="noreferrer">theming</a> documentation it only says:</p>

<p>"In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of:</p>

<ul>
<li>A primary palette: colors most widely used across all screens and components.</li>
<li>An accent palette: colors used for the floating action button and interactive elements.</li>
<li>A warn palette: colors used to convey error state. </li>
<li>A foreground palette: colors for text and icons.</li>
<li>A background palette: colors used for element backgrounds.
"</li>
</ul>

<p>How can I add my background to the theme, or do it in any other way?</p>
