Angular Material 2 custom theme change body background color

2.2k Views Asked by At

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 theming.scss file:

$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),
);

But how can I change this background property from my custom theme? Here what's in my custom theme file:

@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);
0

There are 0 best solutions below