Angular material 5 个深色主题未应用于正文

Question

我创建了一个 "custom" 主题（使用 https://material.angular.io/guide/theming 的主题文档，这很糟糕），如下所示：

@import '~@angular/material/theming';
@include mat-core();

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

.indigo-pink {
  @include angular-material-theme($ip-theme);
}

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

我的 index.html 包含这个：

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

在 app-root 组件的容器中，我使用以下命令在自定义 class 名称（indigo-pink 和 indigo-pink-dark）之间切换：

<div [ngClass]="appTheme">

我还将 CDK 覆盖容器 class 设置为我的自定义 class 名称：

setContainerClass(className: string): void {
  const containerClassToKeep = 'cdk-overlay-container';
  const overlayClassList = this.overlayContainer.getContainerElement().classList;
  const existingClasses = Array.from(overlayClassList);

  existingClasses.forEach(classToken => {
    if (classToken !== containerClassToKeep) {
      overlayClassList.remove(classToken);
    }
  });

  overlayClassList.add(className);
}

主要问题是，当我切换到深色主题时，我确实看到 indigo-pink-dark class 名称已正确添加到我的应用程序组件容器中，但只有部分样式发生变化（例如顶部的工具栏变暗，Material 组件）- 页面主体保持白色。主题指南（和其他博客文章）说使用 mat-app-background 应该可以解决这个问题。

此外，如果我尝试手动更新正文的背景颜色，例如使用

.indigo-pink-dark {
  @include angular-material-theme($ip-theme-dark);

  body & {
    background-color: #000;
  }
}

那么这个"background-color"只是覆盖了整个页面，你看不到页面上的任何元素。这与 CDK 叠加层有关，因为如果我删除将 class 名称添加到叠加层的部分，它会起作用 - 页面背景会设置正确，但叠加层没有获得正确的样式。

Answer 1

我不确定你为什么要操纵 CDK 覆盖容器。这似乎是不必要的。只需将您的主题类绑定到文档正文即可。参见 https://stackblitz.com/edit/angular-ndmju6。

片段：

theme: string = 'Light';

constructor(private renderer: Renderer2) {
  this.renderer.addClass(document.body, 'indigo-pink');
}

toggleTheme(): void {

  if (this.theme === 'Light') {
    this.theme = 'Dark';
    this.renderer.addClass(document.body, 'indigo-pink-dark');
    this.renderer.removeClass(document.body, 'indigo-pink');
  } else {
    this.theme = 'Light';
    this.renderer.addClass(document.body, 'indigo-pink');
    this.renderer.removeClass(document.body, 'indigo-pink-dark');
  }
  
}

Answer 2

我遇到了同样的问题并找到了 this solution on the Angular Material GitHub issue#3298 (post by JamieStill)。

我将所有 app.component.html 内容包装在 div

中

<div class="mat-typography app-frame mat-app-background">
    <app-header></app-header>
    <main>
        <app-post-create></app-post-create>
        <app-post-list></app-post-list>
    </main>
</div>

并且在app.component.css

html, body, app-root, .app-frame {
    overflow: hidden;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
    color: #e0e0e0;
}

我只在 Angular 6 的练习应用程序中对此进行了测试，但我怀疑它也适用于 Angular 5。

之前：

之后：

Answer 3

游戏后期，尝试将高度设置为 100%。这就是为我修复它的原因。这里的 dark-theme 是一个全局 class，里面有我的 Angular Material 深色主题。我把这个 HTML 放在 app.component.html.

<div class="mat-app-background dark-theme" style="height: 100%;">
  <app-root></app-root>
</div>

这是使用 Angular9.

Answer 4

如果您在项目开始后添加 angular material，您只需手动将 mat-app-background class 添加到您的 body 元素在你的 index.html 如下：

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

Answer 5

只有 vh-100 mat-app-background app.component.html

<div class="vh-100 mat-app-background">
  <router-outlet></router-outlet>
</div>

Answer 6

我无法更改默认的浅色主题背景颜色，所以我破解了它：

// fix background problem

.mat-app-background {
  background-color: white;
}

我的深色主题覆盖了它，所以它工作正常。

Answer 7

有点晚了，但有 2 个解决方案（据我所知）。

“问题”：主题应该应用于 angular material 个组件，没有别的。

解决方案：

1- 您要么将您的应用程序封装在垫子抽屉中，并确保它具有 100% 的高度：

<mat-drawer-container style="height: 100%">
    <mat-drawer-content>
        <router-outlet></router-outlet>
    </mat-drawer-content>
</mat-drawer-container>

2- 另一种不需要将整个应用程序放在组件中的方法是通过 css（在本例中为 scss）：

body {
    height: 100%;
    &.theme-light {
       background: rgba(0, 0, 0, 0.02) // or whatever light color suits you
    }
     &.theme-black {
       background: rgba(0, 0, 0, 0.87) // or whatever dark color suits you
    }
}

就我个人而言，我更喜欢使用垫抽屉。为什么？因为颜色将由 material 设计背景颜色决定，所以您不必处理对比度和其他内容，因为它已经为您处理了。

Angular material 5 个深色主题未应用于正文

Angular material 5 dark theme not applied to body

angular-material

angular

angular-cdk