Angular Material 5 深色主题未应用于机身

问题描述 投票：0回答：7

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

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

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

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

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

angular angular-material angular-cdk
7个回答
24
投票

我遇到了同样的问题，并在 Angular Material GitHub 问题#3298（由 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。

之前：

Before

之后：

After

12
投票

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

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

仅限app.component.html中的

vh-100 mat-app-background

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

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

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

这是使用 Angular 9。

3
投票

我不知道你为什么要操纵 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');
  }
  
}
2
投票

编辑 2024：我找到了另一个更简单的解决方案

只需将您的内容包装在带有 mat-app-background

的元素中 
<body class="theme-light">
  <div class="mat-app-background">
    <app-root></app-root>
  </div>
  //...
</body>

仍在工作：原始解决方案

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

“问题”：主题应该应用于有角度的材质组件，而不是其他。

解决方案：

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

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

0
投票

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

// fix background problem

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

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.