Create themes

Create src/theme.scss :

@import '~@angular/material/theming';
@include mat-core(); // always include only once per project

// Default theme
// mat-palette accepts $palette-name, main, lighter and darker variants
$light-primary: mat-palette($mat-blue);
$light-accent: mat-palette($mat-deep-purple);
$light-warn: mat-palette($mat-deep-orange);

$theme-light: mat-light-theme($light-primary, $light-accent, $light-warn);
@include angular-material-theme($theme-light);

// Dark theme
$dark-primary: mat-palette($mat-indigo);
$dark-accent: mat-palette($mat-purple);
$dark-warn: mat-palette($mat-deep-orange);

$theme-dark: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
.theme-dark {
  @include angular-material-theme($theme-dark);
}

In src/style.scss, add :

@import 'theme.scss';