[Angular] Define a custom Material theme

// include all the scss
@import "~@angular/material/theming";

// Include non-theme styles for core.
@include mat-core();

$mat-custom-primary-theme: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #e1234e,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text
  )
);

// Define a theme.
$primary: mat-palette($mat-custom-primary-theme);
$accent: mat-palette($mat-pink, A200, A100, A400);

$theme: mat-light-theme($primary, $accent);

// Include all theme styles for the components.
@include angular-material-theme($theme);

// Our dark theme

.dark-theme {

   $theme: mat-dark-theme($primary, $accent);

   @include angular-material-theme($theme);

}

 Add those in to styles.scss

 

In app.component.html, add 'dark-theme' class by condition:

<main [ngClass]="{ 'dark-theme': dark }">

</main>

 

ts file:

export class AppComponent implements OnInit {
  dark: boolean = false;

}