How to add extended colors on the latest angular material 19 theme

I used the ng generate @angular/material:m3-theme to generate theme colors and apply it on style.scss but when I did this

style.scss

@use '@angular/material' as mat;
@use './_theme-colors.scss' as theme-colors;

html {
color-scheme: light;
@include mat.theme(
(
color: (
primary: theme-colors.$primary-palette,
tertiary: theme-colors.$tertiary-palette,
info: theme-colors.$info-palette,
success: theme-colors.$success-palette,
warning: theme-colors.$warning-palette,
),
typography: Roboto,
density: 0,
high-contrast: high-contrast-overrides(light),
)
);
}


I got an error saying $config has unexpected properties. Valid properties are theme-type, primary, tertiary, use-system-variables, system-variables-prefix. Found: (info success warning). So I cant add new properties.

What is the right way to add new extended colors palette on the latest angular material 19?

Continue reading...