Изменение цвета фона приложения с динамической тематикой - PullRequest
Новая
       44

Изменение цвета фона приложения с динамической тематикой

0 голосов
/ 30 мая 2020

У меня есть настраиваемая тема в Angular Material, которая выглядит: 

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

@include mat-core();

/* ======== angular material custom theme ======== */
$my-custom-primary: mat-palette($mat-blue, 800, 900, A100);
$my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
$my-custom-warn: mat-palette($mat-lime);

// Light theme
$my-custom-light-theme: mat-light-theme($my-custom-primary, $my-custom-accent, $my-custom-warn);
@include angular-material-theme($my-custom-light-theme);

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

// Dark theme
.dark-theme {
    color: $light-primary-text;
    @include angular-material-theme($my-custom-dark-theme);
}

//@include angular-material-theme($my-custom-dark-theme);

// Alternate Angular Material Theme
.my-alternate-theme {
    $my-alternate-primary: mat-palette($mat-red);
    $my-alternate-accent: mat-palette($mat-green, 400);
    $my-alternate-warn: mat-palette($mat-grey);

    $my-alternate-theme: mat-light-theme($my-alternate-primary, $my-alternate-accent, $my-alternate-warn);
    @include angular-material-theme($my-alternate-theme);
}

и динамический c переключатель в app.component: 

<div class="mat-app-background" [class.dark-theme]="theme.isDark()">
    <router-outlet></router-outlet>
</div>

, но при переходе на темную тему цвет фона по-прежнему white - он не меняет, устанавливаю ли я класс mat-app-background в разделе div. Вы знаете, как мне изменить этот цвет фона?

1 Ответ

1 голос
/ 30 мая 2020

Попробуйте это: -

Рабочий стек: - https://stackblitz.com/edit/angular-scss-demo-expsck

<div id="parentContainer" class="mat-app-background" [ngClass]="{'dark-theme': theme.isDark(), 'mat-app-background': true}">
    <router-outlet></router-outlet>
</div>

Также по умолчанию body или любой div принимает высоту в соответствии с его содержимым, если вы хотите рассматривать его как всю высоту и ширину браузера. Добавьте это css: - 

 #parentContainer{
     height: 100vh;
     body: 100vw;
     overflow: auto;
  }
...