时间戳

首页 > 解决方案 > 使用动态主题更改应用程序的背景颜色

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

问题描述

我有自定义主题，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- 它不会改变我是否在部分上设置mat-app-background类。div你知道我应该按照哪种方式来改变这个背景颜色吗？

标签： angularangular-materialthemesstyling

解决方案

尝试这个 ：-

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

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

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

推荐阅读