unable to change to dark theme in angular with angular material

Question

I am using latest version of angular and angular material. I followed the theme guide at https://material.angular.io/guide/theming . I am using one of the pre-build theme in my application but I am unable to change the application to dark mode.

my code looks like as follows.

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

I can see my application using material, it just not applying dark mode. Am I missing something ?

Answer 1

There is no such thing as a dark "mode" - there are only dark and light "themes". Indigo pink is a light theme. If you want to switch between a light and dark theme, you will need to have style for both themes included and scoped so that applying a class like "dark-theme" causes the dark theme to be applied instead of the light theme. The theming guide gives a you the code to do this: https://material.angular.io/guide/theming#multiple-themes . Note that you do not import a prebuilt theme when using this technique.

Note also that you cannot use ng-container for style ( class="..." or style="..." ) because ng-container is not included in the DOM. It is only useful ( very useful) for Angular things like template logic etc.