The documentation from the Angular Material team is rather scarce and missing crucial information on how to transition from M2 to M3 for an existing theme. In our situation we have the following code:

$green-palette: (
  50: #e7f7eb,
  100: #c5eace,
  200: #a0dcb0,
  300: #77d090,
  400: #57c578,
  // Main color:
  500: #33ba60,
  600: #2aaa56,
  700: #1f984a,
  800: #13873f,
  900: #00672b,
  contrast: (
    50: vars.$dark-primary-text,
    100: vars.$dark-primary-text,
    200: vars.$dark-primary-text,
    300: vars.$dark-primary-text,
    400: vars.$dark-primary-text,
    500: vars.$light-primary-text,
    600: vars.$light-primary-text,
    700: vars.$light-primary-text,
    800: vars.$light-primary-text,
    900: vars.$light-primary-text,
  ),
);

// And other palettes

We use these palettes in the theme configuration:

$primary-palette: mat.m2-define-palette(p.$green-palette, 500);
$accent-palette: mat.m2-define-palette(p.$orange-palette, 300, 200, 500);
$warn-palette: mat.m2-define-palette(p.$red-palette, 400, 300, 600);
$link-palette: mat.m2-define-palette(p.$blue-palette, 700, 400, 800);

$theme: mat.m2-define-light-theme(
  (
    color: (
      primary: $primary-palette,
      accent: $accent-palette,
      warn: $warn-palette,
    ),
    typography: t.$typography,
    density: 0,
  )
);

// Adjust background palette
$theme: f.theme-background-change($theme, "status-bar", #e0e0e0);
$theme: f.theme-background-change($theme, "app-bar", #f5f5f5);
$theme: f.theme-background-change($theme, "background", #f6f6f6);
$theme: f.theme-background-change($theme, "hover", rgba(black, 0.04));
$theme: f.theme-background-change($theme, "card", white);
$theme: f.theme-background-change($theme, "dialog", white);
$theme: f.theme-background-change($theme, "disabled-button", rgba(black, 0.12));
$theme: f.theme-background-change($theme, "raised-button", white);
$theme: f.theme-background-change($theme, "focused-button", rgba(black, 0.12));
$theme: f.theme-background-change($theme, "selected-button", #e0e0e0);
$theme: f.theme-background-change($theme, "selected-disabled-button", #bdbdbd);
$theme: f.theme-background-change($theme, "disabled-button-toggle", #eeeeee);
$theme: f.theme-background-change($theme, "unselected-chip", #e0e0e0);
$theme: f.theme-background-change($theme, "disabled-list-option", #eeeeee);
$theme: f.theme-background-change($theme, "tooltip", black);

// Adjust foreground palette
$theme: f.theme-foreground-change($theme, "base", black);
$theme: f.theme-foreground-change($theme, "divider", rgba(black, 0.12));
$theme: f.theme-foreground-change($theme, "dividers", rgba(black, 0.12));
$theme: f.theme-foreground-change($theme, "disabled", rgba(black, 0.38));
$theme: f.theme-foreground-change($theme, "disabled-button", rgba(black, 0.26));
$theme: f.theme-foreground-change($theme, "disabled-text", v.$dark-disabled-text);
$theme: f.theme-foreground-change($theme, "elevation", black);
$theme: f.theme-foreground-change($theme, "hint-text", rgba(black, 0.38));
$theme: f.theme-foreground-change($theme, "secondary-text", v.$dark-secondary-text);
$theme: f.theme-foreground-change($theme, "icon", v.$dark-secondary-text);
$theme: f.theme-foreground-change($theme, "icons", v.$dark-secondary-text);
$theme: f.theme-foreground-change($theme, "text", v.$dark-primary-text);
$theme: f.theme-foreground-change($theme, "slider-min", v.$dark-primary-text);
$theme: f.theme-foreground-change($theme, "slider-off", rgba(black, 0.26));
$theme: f.theme-foreground-change($theme, "slider-off-active", rgba(black, 0.38));

See How to set background palette in custom theme of Angular Material? for more information on the theme-background-change and theme-foreground-change functions.

Also, the typography configuration is a whole other matter and I will not go into this.

The question is how can I convert this into a M3 theme? I can generate a theme configuration file using ng generate @angular/material:m3-theme but this will not match the current palettes at all as it will not use the current primary and secondary colors as-is but as some starting point.

Also, where should I define my changed foreground and background colors in the new M3 theme?