Как добавить второстепенные цвета и цвета успеха в пользовательскую тему материала?

Я работаю с Angular 17 и успешно создал собственную тему материала с основными, акцентными и предупреждающими цветами. Однако я хотел бы добавить в свою тему дополнительные цвета, такие как вторичность и успех. Как я могу определить эти дополнительные цветовые палитры в моей теме Angular Material?

Кроме того, у меня есть вопрос, зачем мне определять цветовую палитру. Например, если я хочу использовать #5988ff в качестве основного цвета, зачем мне создавать палитру, а не просто устанавливать #5988ff в качестве основного цвета?

Вот моя текущая настройка SCSS для этой темы:

@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);

Я мог только изменить тему локально. На Stackblitz это не сработало. В любом случае, вот код для этого:

Демо-версия Stackblitz