Angular Material 动态着色应用程序背景不起作用答案

【问题标题】：Angular Material coloring app background dynamically does not workAngular Material 动态着色应用程序背景不起作用
【发布时间】：2020-03-03 09:55:02
【问题描述】：

我试图让我的应用程序的背景是由当前使用的主题定义的颜色。这实际上不起作用。

我尝试过的：Angular Material2 theming - how to set app background?。我尝试使用此帖子的公认解决方案，但对我而言，仅设置了所有组件的背景并被主题覆盖。我不知道如何处理它。

它的样子（没有内容的白色部分也应该是深色的）：

我已经复制了本教程中的主题操作，并且一切正常：https://medium.com/grensesnittet/dynamic-themes-in-angular-material-b6dc0c88dfd7

app.component.html：

<div
  [ngClass]="{'default-theme': (selectedTheme | async) === 'default-theme', 'dark-theme': (selectedTheme | async) === 'dark-theme', 'light-theme': (selectedTheme | async) === 'light-theme', 'nature-theme': (selectedTheme | async) === 'nature-theme'}">
  <div class="mat-app-background">
    <app-header></app-header>
    <router-outlet></router-outlet>
  </div>
</div>

index.html:

<body class="mat-app-background">
  <app-root>
  </app-root>
</body>

材料主题.scss：

@import "~@angular/material/theming";
@import "./component-themes";

@include mat-core();

$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
@include component-themes($theme);

.dark-theme {
  color: $light-primary-text;
  $dark-primary: mat-palette($mat-grey, 700, 300, 900);
  $dark-accent: mat-palette($mat-blue-grey, 400);
  $dark-warn: mat-palette($mat-red, 500);
  $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
  $bp: mat-palette($mat-red);

  @include angular-material-theme($dark-theme);
  @include component-themes($dark-theme);
}

styles.scss：

@import "./material-theme";
@import "~@angular/material/theming";

body {
  margin: 0;
  font-family: Roboto, sans-serif;
  // background-color: mat-color($bp);
}

主题通过 app-component.ts 设置：

  ngOnInit(): void {
    this.themeService.setTheme(localStorage.getItem("theme"));
    this.selectedTheme = this.themeService.theme;
    this.selectedTheme.subscribe(data => {
      const overlayContainerClasses = this.overlayContainer.getContainerElement()
        .classList;
      const themeClassesToRemove = Array.from(
        overlayContainerClasses
      ).filter((item: string) => item.includes("-theme"));
      if (themeClassesToRemove.length) {
        overlayContainerClasses.remove(...themeClassesToRemove);
      }
      overlayContainerClasses.add(data);
    });
  }

那么完成它的最佳方法是什么？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

在深色和浅色主题之间切换时，我也遇到了背景颜色问题，因为仅更改 OverlayContainer 上的 CSS 类是不够的，我还必须更改 body 元素上的 CSS 类。

这是对我有用的代码：

（您可以在 https://github.com/toongeorges/angular-electron-material-design/commit/4d91f9c21ed24b853da8284099e641676d620826 找到完整的工作代码示例）

在源/index.html 中：

<body class="mat-app-background">
  <app-root>Loading...</app-root>
</body>

在 src/styles.scss 中：

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

.light-theme {
    @include angular-material-theme($light-theme);
}

.dark-theme {
    @include angular-material-theme($dark-theme);
}

在 src/app/app.component.html:

    <button mat-raised-button color="accent" mat-button [matMenuTriggerFor]="menu" aria-label="Select Theme">
        Select Theme
    </button>
    <mat-menu #menu="matMenu">
        <button mat-menu-item (click)="onSetTheme('dark-theme')">
            <mat-icon svgIcon="brightness-2"></mat-icon>
            <span>Dark Theme</span>
        </button>
        <button mat-menu-item (click)="onSetTheme('light-theme')">
            <mat-icon svgIcon="brightness-7"></mat-icon>
            <span>Light Theme</span>
        </button>
    </mat-menu>

在 src/app/app.component.ts 中：

  onSetTheme(theme: string) {
    if (theme === this.componentCssClass) {
      //ignore change
    } else {
      if (theme == 'dark-theme') {
        this.resetTheme(theme);
      } else if (theme == 'light-theme') {
        this.resetTheme(theme);
      } else {
        console.error("Unknown theme: " + theme);
      }
    }
  }

  resetTheme(theme: string) {
    const body = document.getElementsByTagName('body')[0];

    if (this.componentCssClass) {
      //remove the old style
      body.classList.remove(this.componentCssClass);
      this.overlayContainer.getContainerElement().classList.remove(this.componentCssClass);
    }

    this.componentCssClass = theme;
    //set the new style
    body.classList.add(this.componentCssClass);
    this.overlayContainer.getContainerElement().classList.add(this.componentCssClass);
  }

【讨论】：