How to Add Secondary and Success Colors to a Custom Material Theme?

I'm working with Angular 17 and have successfully created a custom Material theme with primary, accent, and warning colors. However, I would like to add additional colors such as secondary and success to my theme. How can I define these additional color palettes in my Angular Material theme?

Additionally, I have a question about why I need to define a color palette. For example, if I want to use #5988ff as the primary color, why do I need to create a palette instead of just directly setting #5988ff as the primary color?

Here's my current SCSS setup for the theme:

@use '@angular/material' as mat;

@include mat.core();
$custom-primary: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-primary: mat.define-palette($custom-primary, 500);

$custom-secondary: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-secondary: mat.define-palette($custom-secondary, 500);

$custom-accent: (50: #e5e7e9, 100: #bfc3c8, 200: #959ba3, 300: #6a727e, 400: #4a5463, 500: #2a3647, 600: #253040, 700: #1f2937, 800: #19222f, 900: #0f1620, A100: #629eff, A200: #2f7fff, A400: #0060fb, A700: #0057e1, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #ffffff, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #ffffff, A400: #ffffff, A700: #ffffff,));
$custom-accent: mat.define-palette($custom-accent, A200, A100, A400);

$custom-warn: (50: #ffe0e0, 100: #ffb3b3, 200: #ff8080, 300: #ff4d4d, 400: #ff2626, 500: #ff0000, 600: #ff0000, 700: #ff0000, 800: #ff0000, 900: #ff0000, A100: #ffffff, A200: #fff2f2, A400: #ffbfbf, A700: #ffa6a6, contrast: (50: #000000, 100: #000000, 200: #000000, 300: #000000, 400: #ffffff, 500: #ffffff, 600: #ffffff, 700: #ffffff, 800: #ffffff, 900: #ffffff, A100: #000000, A200: #000000, A400: #000000, A700: #000000,));
$custom-warn: mat.define-palette($custom-warn, 400);

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

@include mat.all-component-themes($My_Project-theme);

I could only change the theme locally. It didn't work on Stackblitz. Anyway, here is the code for it:

Stackblitz Demo

You can add it - but you have to define palettes for it.

Here is the Stackblitz with Success Palette added

Notable changes are:

1. I added $custom-success: mat.define-palette(mat.$green-palette, 500); in global-styles.scss
2. Added success-container class in global-styles.scss
3. Added a div with .success-container class.

You could define other palettes as per your projects' needs