使用动态主题更改应用程序的背景颜色

Question

我在 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);
}

和 app.component 中的动态切换器：

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

但是当更改为深色主题时，背景颜色仍然是 white - 无论我在 div 部分设置 mat-app-background class 都不会改变。你知道我应该用什么方法来改变这个背景颜色吗？

Answer 1

试试这个：-

工作 Stackblitz :- 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>

默认情况下，正文或任何 div 根据其内容获取高度，如果您想将其视为浏览器的整个高度和宽度。添加这个 css :-

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

使用动态主题更改应用程序的背景颜色

Changing background color of app with dynami theming

themes

styling

angular-material

angular