将 Angular Material M2 主题转换为 M3

Question

Angular Material 团队的文档相当稀缺，并且缺少有关如何将现有主题从 M2 过渡到 M3 的关键信息。在我们的情况下，我们有以下代码：

$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

我们在主题配置中使用这些调色板：

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

有关 theme-background-change 和

theme-foreground-change

函数的更多信息，请参阅

如何在 Angular Material 的自定义主题中设置背景调色板？

。

此外，排版配置完全是另一回事，我不会讨论这个。

问题是如何将其转换为M3主题？我可以使用

ng generate @angular/material:m3-theme

 生成主题配置文件，但这根本不匹配当前的调色板，因为它不会按原样使用当前的主色和次要颜色，而是作为一些起点。

另外，我应该在新的 M3 主题中在哪里定义更改后的前景色和背景色？

Answer 1

由于没有将调色板从 M2 转换为 M3 的指南，我查找了所使用的色调（浅色主题为 40，深色主题为 80），并将生成的调色板更改为使用以下格式，其中

#33ba60

 是我的主要颜色：

  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 2

我发现了这个： 您必须导入material3主题，如下所示

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

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

希望这有帮助。

另请参阅

此处