Vfrdtyky

I've been tring to make a custom theme for my site but nothing will effect the background color. This is my theme:

@import '~@angular/material/theming';

@include mat-core();



$warn: mat-palette($mat-red);



$dark-primary: mat-palette($mat-grey, 900);

$dark-accent: mat-palette($mat-grey);

$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $warn);

@include angular-material-theme($dark-theme);



$blue-primary: mat-palette($mat-indigo, 800, 100, 100);

$blue-accent: mat-palette($mat-grey, 300, 100, 500);

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



.alt-theme {

    @include angular-material-theme($blue-theme);

}

I have mat-app-background on my body but what ever the first included theme is set to dark/light that is what the background color is changed too, black or white.

This was a problem at first but I'm fine with that my issue now is that it doesnt care that the alt-theme is light, the background stays black. Or if the first included theme is light and the alt is dark it will stay white.

EDIT:

So my issue was that I was adding the class to my mat-drawer-container which I guess it doesnt like, I wrapped it in a div and then everything started working as expected

I usually add variables like these:

$mat-light-theme-background: (

  status-bar: map_get($mat-grey, 300),

  app-bar:    map_get($mat-grey, 100),

  background: map_get($mat-grey, A100),

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

);



$mat-light-theme-foreground: (

  base:              black,

  divider:           $dark-dividers,

  dividers:          $dark-dividers,

  disabled:          $dark-disabled-text,

  disabled-button:   rgba(black, 0.26),

  disabled-text:     $dark-disabled-text,

  hint-text:         $dark-disabled-text,

  secondary-text:    $dark-secondary-text,

  icon:              rgba(black, 0.54),

  icons:             rgba(black, 0.54),

  text:              rgba(black, 0.87),

  slider-min:        rgba(black, 0.87),

  slider-off:        rgba(black, 0.26),

  slider-off-active: rgba(black, 0.38),

);



// Create the theme object (a Sass map containing all of the palettes).

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