如何为Angular Material M3主题组件应用次要/第三颜色？

问题根源 #

你当前的主题配置存在两个核心问题：

• mat.define-theme仅传入了primary和tertiary，secondary调色板未作为独立项注入主题结构；
• 生成的代码将secondary等调色板合并到$_primary中，导致组件无法通过color属性识别到独立的secondary/tertiary调色板。

修复步骤 #

1. 修正m3-theme.scss的主题配置 #

修改$light-theme和$dark-theme的定义，将secondary、neutral等调色板作为独立项加入主题配置，无需将其他调色板合并到primary中（M3原生支持多调色板独立配置）：

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

$_palettes: (
  primary: (
    // 你的自定义主色调色板内容
  ),
  secondary: (
    // 你的自定义次要色调色板内容
  ),
  tertiary: (
    // 你的自定义第三色调色板内容
  ),
  neutral: (
    // 你的自定义中性调色板内容
  ),
  neutral-variant: (
    // 你的自定义中性变体调色板内容
  ),
  error: (
    // 你的自定义错误调色板内容
  ),
);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: map.get($_palettes, primary),
    secondary: map.get($_palettes, secondary), // 新增secondary配置
    tertiary: map.get($_palettes, tertiary),
    neutral: map.get($_palettes, neutral),
    neutral-variant: map.get($_palettes, neutral-variant),
    error: map.get($_palettes, error),
  ),
));
$dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: map.get($_palettes, primary),
    secondary: map.get($_palettes, secondary), // 新增secondary配置
    tertiary: map.get($_palettes, tertiary),
    neutral: map.get($_palettes, neutral),
    neutral-variant: map.get($_palettes, neutral-variant),
    error: map.get($_palettes, error),
  ),
));

2. 为组件指定颜色属性 #

配置完成后，可直接通过color属性为组件设置次要色或第三色：

<!-- 次要色按钮 -->
<button mat-flat-button color="secondary">
    <mat-icon>favorite</mat-icon>
    Hello World!
</button>

<!-- 第三色按钮 -->
<button mat-flat-button color="tertiary">
    <mat-icon>star</mat-icon>
    Third Color Button
</button>

3. 让第三色自动应用到默认组件（如FAB） #

预构建的"Cyan & Orange"主题中，第三色自动应用到FAB、滑动切换等组件，是因为这些组件的M3默认样式绑定了tertiary调色板。要实现同样效果，有两种方式：

方式一：配置默认调色板映射

在define-theme中添加default-palette配置，指定组件默认使用的调色板：

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: map.get($_palettes, primary),
    secondary: map.get($_palettes, secondary),
    tertiary: map.get($_palettes, tertiary),
    neutral: map.get($_palettes, neutral),
    neutral-variant: map.get($_palettes, neutral-variant),
    error: map.get($_palettes, error),
    // 绑定组件到第三色调色板
    default-palette: (
      fab: tertiary,
      slide-toggle: tertiary,
      radio: 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);
  
  // 让FAB默认使用第三色
  .mat-mdc-fab {
    --mdc-fab-container-color: mat.get-color-from-palette(customPalette.$_palettes, tertiary, 60);
    --mdc-fab-label-text-color: mat.get-color-from-palette(customPalette.$_palettes, tertiary, 10);
  }
}

验证修复 #

重新构建应用后，组件的color="secondary"/color="tertiary"属性会正确渲染对应颜色，配置了默认调色板的组件也会自动使用第三色。

内容的提问来源于stack exchange，提问作者Joel Müller