Angular Material2 theming - how to set app background?

Question

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.

I found

Answer 1

Lately, from Material 10.x onwards, the theming methods are getting revamped. With the new approach mat-light-theme or mat-dark-theme only accepts a config object for colors. This is what I've found in the comments :

Previously in Angular Material, theme objects contained the color configuration directly. With the recent refactoring of the theming system to allow for density and typography configurations, this is no longer the case.

At the moment these methods support legacy approach as well, but I hope soon that will be declared as a breaking change. Since we can't merge the new background to theme object as before, the accepted answer might not work anymore.

What I did instead of that, I've updated the $mat-light-theme-background pallete with my custom background, before creating the new theme and that did the job.

$app-primary: mat-palette($md-light);
$app-accent: mat-palette($mat-pink, A200, A100, A400);
$app-warn: mat-palette($mat-red);
$custom-background-color: map_get($md-light, 50);

$mat-light-theme-background: map_merge($mat-light-theme-background, (background: $custom-background-color));

$light-theme: mat-light-theme((
    color: (
        primary: $app-primary,
        accent: $app-accent,
        warn:  $app-warn
    )
));

Note: $md-light is the custom pallet that I have defined for my application, you could use any other values. Also I have tried passing 'background' along with the other color properties which didn't work some reason.

The way themes are included is also slightly changed. Now there is new method called angular-material-color for including the themes.

@include angular-material-color($light-theme);