Угловой материал не может изменить цвет фона с темой

Question

Я пытался создать собственную тему для своего сайта, но ничто не повлияет на цвет фона. Это моя тема:

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

У меня есть mat-app-background на моем теле, но для первой включенной темы задано значение темный / светлый, то есть цвет фона также меняется, черный или белый.

Сначала это была проблема, но я согласен с тем, что моя проблема в том, что все равно, что alt-тема светлая, фон остается черным. Или, если первая включенная тема - светлая, а альтернатива - темная, она останется белой.

EDIT:

Итак, моя проблема заключалась в том, что я добавлял класс в свой mat-drawer-container, который, как мне кажется, не нравится, я обернул его в div, а затем все стало работать как положено

Answer 1

Я обычно добавляю переменные, подобные этим:

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