Angular Styles SCSS include more than basic theme (primary, accent, warn)

Question

I am using angular 17 and have been having issues trying to find an answer to my issue.

My styles work fine as is right now.

However, I would like to add more themes to choose from but can't seem to find a good solution that works for me. I've tried so many different solutions some version specific etc.

I would like to do something like color1 instead of primary / accent / warn I still want to use these I just want more types.

$my-app-color1: mat.define-palette(mat.$red-palette);
$my-app-color2: mat.define-palette(mat.$red-palette);

styles.scss

@use "@angular/material" as mat;

@include mat.core();

$my-app-primary: mat.define-palette(mat.$indigo-palette, 500, 100, 900);
$my-app-accent: mat.define-palette(mat.$amber-palette, 300, 100, 900);
$my-app-warn: mat.define-palette(mat.$red-palette);

$my-app-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-app-primary,
      accent: $my-app-accent,
      warn: $my-app-warn,
    ),
  )
);

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

html,
body {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}