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