如何将二级或三级颜色应用于具有 M3 主题的 Angular Material 组件？

Question

我目前正在发现具有 M3 主题规范的 Angular Material v18+。使用我在文档中找到的以下示意图，我生成了一个自定义主题，包括自定义调色板。

ng generate @angular/material:m3-theme

这给我留下了一个文件，其中包含 m3-theme.scss 文件中的以下代码：

@use 'sass:map';
@use '@angular/material' as mat;

$_palettes: (
  primary: (
    // ...
  ),
  secondary: (
    // ...
  ),
  tertiary: (
    // ...
  ),
  neutral: (
    // ...
  ),
  neutral-variant: (
    // ...
  ),
  error: (
    // ...
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
));
$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
));

我已将生成的主题包含在 styles.scss 文件中，如下所示：

@use '@angular/material' as mat;
@use '../m3-theme.scss' as customPalette;

@include mat.core();

:root {
  @include mat.all-component-themes(customPalette.$light-theme);
}


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

当我使用某些组件构建一个小型演示应用程序时，我注意到应用程序中只会使用主颜色 - 我既找不到应用于任何组件的辅助颜色，也找不到应用到任何组件的第三颜色。

有没有办法将二级或三级颜色应用于 Angular Material 组件？例如，如果我想将这个按钮的背景颜色染成我的辅助颜色：

<button mat-flat-button>
    <mat-icon>favorite</mat-icon>
    Hello World!
</button>

我已经尝试将具有相应值的颜色属性添加到 HTML 标签，例如：

<button mat-flat-button color="tertiary">
    <mat-icon>favorite</mat-icon>
    Hello World!
</button>

这并没有改变任何东西。

我还注意到，当使用预构建的“青色和橙色”主题时，橙色第三色被应用到多个组件上，例如 FAB 按钮、滑动切换按钮或单选按钮。不过，我还没弄清楚为什么会发生这种情况。

Answer 1

我在文档中找到了我的问题的解决方案。

这是“app.component.html”文件中的代码：

<button mat-flat-button class="primary-button">Primary</button>
<button mat-flat-button class="secondary-button">Secondary</button>
<button mat-flat-button class="tertiary-button">Tertiary</button>

为了赋予组件颜色，我将以下代码添加到自定义生成的主题文件“m3-theme.scss”中：

.primary-button {
  @include mat.button-color($light-theme, $color-variant: primary);
}

.secondary-button {
  @include mat.button-color($light-theme, $color-variant: secondary);
}

.tertiary-button {
  @include mat.button-color($light-theme, $color-variant: tertiary);
}