Angular Material 5 深色主题不适用于身体答案

【问题标题】：Angular material 5 dark theme not applied to bodyAngular Material 5 深色主题不适用于身体
【发布时间】：2018-09-18 22:43:38
【问题描述】：

我创建了一个“自定义”主题，（使用 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 组件的容器中，我使用以下代码在自定义类名（indigo-pink 和 indigo-pink-dark）之间切换：

<div [ngClass]="appTheme">

我还使用以下方法将 CDK 覆盖容器类设置为我的自定义类名称：

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 类名被正确添加到我的应用程序组件容器中，但只有一些样式发生变化（例如，顶部的工具栏变暗，并且材料组件） - 页面主体保持白色。主题指南（和其他博客文章）说使用 mat-app-background 应该可以解决这个确切的问题。

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

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

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

然后这个“背景颜色”只是覆盖了整个页面，你看不到页面上的任何元素。这与 CDK 覆盖有关，因为如果我删除将类名添加到覆盖的部分，它会起作用 - 页面的背景确实设置正确，但随后覆盖没有得到正确的样式。

【问题讨论】：

从我到现在所面临的情况（这与您的问题相似），我发现的最佳解决方案是使用 sidenav ：mat-sidenav-content 从 drak 主题中获取背景颜色。如果不想用，也可以用材质卡上色。只需制作一张遍布全身的卡片，然后移除边框半径（如果必须的话，还可以使用填充）。
谢谢，是的，我也看到了这个推荐，但如果可能的话，我想避免将整个网站变成一个组件 :)

标签： angular angular-material angular-cdk

【解决方案1】：

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

“问题”：主题应该应用于有角度的材料组件，仅此而已。

解决方案：

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
    }
}

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

【讨论】：

【解决方案2】：

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

// fix background problem

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果您在项目开始后添加角度材质，您只需手动将 mat-app-background 类添加到 index 中的 body 元素.html如下：

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

【讨论】：

【解决方案5】：

我不确定您为什么要操作 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');
  }
  
}

【讨论】：

主要是因为文档说您必须这样做，部分原因是在我添加该部分之前覆盖组件的样式不正确。它在 stackblitz 中起作用的原因是因为您使用的是 sidenav-container 组件。但我没有使用它，如果可能的话，我宁愿避免它。不过谢谢
正确 - 我明白了。我认为问题在于类层次结构。基本上，您将所有 Angular Material 样式定义为明暗主题类的子类。这适用于主应用程序元素（其中的所有内容都是子元素），但覆盖元素不是子元素 - 它是兄弟元素。需要发生的是将主题类应用于以便覆盖元素是子元素。这也适用于主 app 元素，因为它也是 . 的子元素
谢谢，是的。不幸的是，主体在我的应用程序的根目录之外，因此我无法使用 Angular 访问它。在 NG1x 中，我们可以将 body 作为应用程序的根，但在 NG2+ 中，这似乎是不可能的。
实际上您可以访问它 - 您可以将文档或渲染器对象注入您的应用控制器的构造函数并添加/删除类（抱歉内联格式）：constructor(private renderer: Renderer2) { this.renderer.addClass(document.body, 'indigo-pink'); }。我认为这不会在 stackblitz 中起作用。

【解决方案6】：

在游戏后期，但尝试将高度设置为 100%。这就是为我解决的问题。这里的 dark-theme 是一个全局类，其中包含我的 Angular Material 深色主题。我把这个 HTML 放在 app.component.html 中。

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

这是使用 Angular 9。

【讨论】：

【解决方案7】：

我遇到了同样的问题，发现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 中使用。

之前：

之后：

【讨论】：

谢谢.. body 类的 mat-app-background 类为我做了。在此之前，主/应用程序组件上的控件是不可见的 - 仅在焦点上可见。您的提示使黑暗主题变得完整:)