title: Angular Material 2 custom theme change body background color
body: <p>I have created my custom theme in Angular Material 2 and now I want to change the default body background color using my custom theme. What I think is that it can be changed/overridden by using this map object in <code>theming.scss</code> file:</p>
  
  <pre><code>$mat-light-theme-background: (
    status-bar: map_get($mat-grey, 300),
    app-bar:    map_get($mat-grey, 100),
    background: map_get($mat-grey, 50), //To override this property
    hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
    card:       white,
    dialog:     white,
    disabled-button: $black-12-opacity,
    raised-button: white,
    focused-button: $black-6-opacity,
    selected-button: map_get($mat-grey, 300),
    selected-disabled-button: map_get($mat-grey, 400),
    disabled-button-toggle: map_get($mat-grey, 200),
    unselected-chip: map_get($mat-grey, 300),
    disabled-list-option: map_get($mat-grey, 200),
  );
  </code></pre>
  
  <p>But how can I change this <code>background</code> property from my custom theme? Here what's in my custom theme file:</p>
  
  <pre><code>@import '~@angular/material/theming';
  
  $typography: mat-typography-config( $font-family: 'Roboto, sans-serif', $body-1: mat-typography-level(13px, 18px, 400) );
  
  @include mat-core($typography);
  
  $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);
  </code></pre>