代码之家 › 专栏 › 技术社区 › Ashish

无法使用角度材质更改为角度暗主题

angular-material-6 angular

0

Ashish · 技术社区 · 6 年前

我正在使用最新版本的角和角材料。我按照主题指南 https://material.angular.io/guide/theming . 我正在应用程序中使用一个预构建主题,但无法将应用程序更改为暗模式。

我的代码如下。

app.component.html软件

ng-container [class.dark-theme]="isDark" class="mat-app-background">
  <mat-sidenav-container>
    <mat-sidenav></mat-sidenav>
    <mat-sidenav-content>
      <app-request></app-request>
      <app-benchmark></app-benchmark>
    </mat-sidenav-content>
  </mat-sidenav-container>
</ng-container>

应用组件

export class AppComponent implements OnInit {
  isDark = true;

  ngOnInit(): void {
  }
}

样式表

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

我可以看到我的应用程序的材料,它只是不应用黑暗模式。我遗漏了什么吗?

1 回复 | 直到 6 年前

1

0

G. Tranter 6 年前

没有黑暗的“模式”——只有黑暗和光明的“主题”。靛蓝粉是一个浅色的主题。如果要在浅色主题和深色主题之间切换,则需要同时包含和限定主题的样式,以便应用类似“深色主题”的类会导致应用深色主题而不是浅色主题。主题化指南为您提供了执行此操作的代码: https://material.angular.io/guide/theming#multiple-themes . 注意你不使用此技术时导入预先构建的主题。

还请注意,您不能使用 ng-container 为风格( class="..." 或 style="..." 因为 天然气容器 不包括在dom中。它只是有用的( 非常有用)用于角度方面的事情,如模板逻辑等。