Custom Theme for Angular 19

I am trying to create a custom theme for my Angular 19 application. The following is working fine in my theme.scss file, using built-in themes:

@use '@angular/material' as mat;

$primary-palatte: mat.$green-palette;
$tertiary-pallate: mat.$red-palette;

html {
@include mat.theme(( color: ( primary: $primary-palatte, tertiary: $tertiary-pallate, theme-type: light, ), typography: Roboto, density: 0 ));
}


Now I want to replace $primary-palatte with my own custom palette, instead of the built-in one (mat.$green-palette). But when I try this:

@use '@angular/material' as mat;

$primary-palatte: ( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, );
$tertiary-pallate: mat.$red-palette;

html {
@include mat.theme(( color: ( primary: $primary-palatte, tertiary: $tertiary-pallate, theme-type: light, ), typography: Roboto, density: 0 ));
}


I get an error saying that $primary-palatte is not a valid M3 palette. I did some digging, and it was suggested to try:

$primary-palatte: mat.define-palette(( 50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, ));


But that gave me a compilation error saying that define-palette was undefined.

Why is "define-palette" undefined?

Where can I find a list of valid "mat." functions? (I'm using Visual Studio 2022, and it's not giving me any intellisense.)

How else can I create a valid M3 palette from what I have?

Any help would be most appreciated.

Thank you,

John

Continue reading...