Convert an Angular Material M2 theme to M3

Question

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?

Answer 1

There is a schematic to generate a m3 theme.

The inputs are the primary colors of each palette (primary, secondary, tertiary) and some neutral colors.

It generates a single scss file which can be modified and integrated.

Answer 2

As there is no guide to converting a palette from M2 to M3 I looked up the hue used (40 for light and 80 for dark themes) and changed the generated palettes to use the following format where #33ba60 is my primary color:

  primary: (
    0: #000000,
    10: color.scale(#33ba60, $lightness: -(100% / 40) * 30),
    20: color.scale(#33ba60, $lightness: -(100% / 40) * 20),
    25: color.scale(#33ba60, $lightness: -(100% / 40) * 15),
    30: color.scale(#33ba60, $lightness: -(100% / 40) * 10),
    35: color.scale(#33ba60, $lightness: -(100% / 40) * 5),
    40: #33ba60,
    50: color.scale(#33ba60, $lightness: (100% / 60) * 10),
    60: color.scale(#33ba60, $lightness: (100% / 60) * 20),
    70: color.scale(#33ba60, $lightness: (100% / 60) * 30),
    80: color.scale(#33ba60, $lightness: (100% / 60) * 40),
    90: color.scale(#33ba60, $lightness: (100% / 60) * 50),
    95: color.scale(#33ba60, $lightness: (100% / 60) * 55),
    98: color.scale(#33ba60, $lightness: (100% / 60) * 58),
    99: color.scale(#33ba60, $lightness: (100% / 60) * 59),
    100: #ffffff,
  ),
  primary-dark: (
    0: #000000,
    10: color.scale(#33ba60, $lightness: -(100% / 80) * 70),
    20: color.scale(#33ba60, $lightness: -(100% / 80) * 60),
    25: color.scale(#33ba60, $lightness: -(100% / 80) * 55),
    30: color.scale(#33ba60, $lightness: -(100% / 80) * 50),
    35: color.scale(#33ba60, $lightness: -(100% / 80) * 45),
    40: color.scale(#33ba60, $lightness: -(100% / 80) * 40),
    50: color.scale(#33ba60, $lightness: -(100% / 80) * 30),
    60: color.scale(#33ba60, $lightness: -(100% / 80) * 20),
    70: color.scale(#33ba60, $lightness: -(100% / 80) * 10),
    80: #33ba60,
    90: color.scale(#33ba60, $lightness: (100% / 20) * 10),
    95: color.scale(#33ba60, $lightness: (100% / 20) * 15),
    98: color.scale(#33ba60, $lightness: (100% / 20) * 18),
    99: color.scale(#33ba60, $lightness: (100% / 20) * 19),
    100: #ffffff,
  ),

Answer 3

I found this: You have to import the material3 Theme as shown below

import androidx.compose.**material3**.MaterialTheme

MaterialTheme(
    colorScheme = AppColorScheme,
    typography = AppTypography,
    shapes = AppShapes
) {
    // M3 content
}

Hope this helps.

See also here