How to use custom color palette in @angular/material-experimental - Expected...

X [ERROR] Expected $config.color.primary to be a valid M3 palette.

angular 17

I can't find the expected valid M3 palette for @angular/material-experimental anywhere.

tryied this in styles.scss:

@use "@angular/material" as mat;
@use "@angular/material-experimental" as matx;

$primary-palette: (
0: #000000,
10: #191027,
20: #2b1a41,
25: #3d245c,
30: #4f2f76,
35: #9257c5,
40: #654083,
50: #79539b,
60: #9d80b7,
70: #c1aed3,
80: #e5dbef,
90: #e5ddee,
95: #e9e3ef,
98: #ebe7ef,
99: #efecf1,
100: #ffffff,
);

$m3-custom-theme: (
color: (
primary: $primary-palette
),
);

$light-theme: matx.define-theme($m3-custom);

html,
body {
height: 100%;
@include mat.button-theme($light-theme);
}

Continue reading...