Angular Material Theming - theme

theme.scss

// define 3 theme color
// mat-palette accepts $palette-name, main, lighter and darker variants
$my-theme-primary: mat-palette($mat-indigo, 700, 300, 900);
$my-theme-accent: mat-palette($mat-light-blue);
$my-theme-warn: mat-palette($mat-deep-orange, A200);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$my-theme: mat-light-theme(
    $my-theme-primary,
    $my-theme-accent,
    $my-theme-warn
);