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 ?

add this on your component encapsulation: ViewEncapsulation.None , so that you can override the style — Joel Joseph

G. Tranter G. Tranter · Accepted Answer · 2019-01-14T17:01:18

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.

unable to change to dark theme in angular with angular material

1 Answers