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="..."），因为ng-container不包含在DOM中。它仅对模板逻辑等Angular有用（非常有用）。

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

1 个答案: