Angular Material 3 theming system

Setting up theming for an application using the Sass APIs introduced in Angular Material v19 is different from prior versions. In Angular Material's v2 theming system, I defined my color palette, my theme, and then applied the theme to specific components, e.g.:

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$blue-grey-palette, 500);
$my-accent: mat.define-palette(mat.$amber-palette, 700, 900, 100);
$my-warn: mat.define-palette(mat.$red-palette, 700, 100, 100);

$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: $my-warn,
),
typography: mat.define-typography-config(),
density: 0,
),
);

@include mat.tabs-color($my-theme);


If I try to apply this example to Angular Material's v3 theming system, how do I define the specific color values to be used from a given palette?

html {
@include mat.theme((
color: (
theme-type: light,
primary: mat.$blue-palette,
secondary: mat.$yellow-palette,
tertiary: mat.$red-palette,
),
typography: Roboto,
density: 0,
));
}

Continue reading...