无法用角材料转换成暗主题

Question

我正在使用最新版本的角和角材料。我跟随了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>

app.component.ts

export class AppComponent implements OnInit {
  isDark = true;

  ngOnInit(): void {
  }
}

style.css

/* 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; }

我可以看到我的应用程序使用的材料，它只是没有应用黑暗模式。我漏掉了什么吗？

Answer 1

没有黑暗的“模式”--只有黑暗和光明的“主题”。靛蓝粉是一个轻盈的主题。如果您想要在光主题和暗主题之间切换，则需要对包含的主题和作用域都有样式，这样应用像“暗主题”这样的类会导致应用暗主题而不是光主题。主题指南为您提供了这样做的代码：https://material.angular.io/guide/theming#multiple-themes。请注意，在使用此技术时，不导入预构建的主题。

还请注意，您不能将ng-container用于样式(class="..."或style="...")，因为DOM中没有包含ng-container。它只对诸如模板、逻辑等角度的东西有用(非常有用)。