Angular Material 18中mat-button的warn与accent颜色设置求助

我尝试为mat-button设置warn和accent颜色，但始终无法生效。网上找的代码也不起作用，相关代码如下：

$myapp-theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette, A400, A100, A700);
$myapp-theme-accent: mat.m2-define-palette(mat.$m2-indigo-palette);
$myapp-theme-warn: mat.m2-define-palette(mat.$m2-red-palette);

$myapp-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $myapp-theme-primary,
    accent: $myapp-theme-accent,
    warn: $myapp-theme-warn,
  )
));

我的项目实际使用的是Material 3主题（m3-theme.scss），代码如下：

m3-theme.scss

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

// 注：调色板由以下颜色生成：primary: #7DFA90, secondary: #7DFA90, tertiary: #7DFABA
$_palettes: (
  primary: (
    0: #000000,
    10: #002108,
    20: #003912,
  ),
  secondary: (
    0: #000000,
    10: #002108,
    20: #003912,
  ),
  tertiary: (
    0: #000000,
    10: #002112,
    20: #003822,
  ),
  neutral: (
    0: #000000,
    10: #1a1c19,
    20: #2f312d,
  ),
  neutral-variant: (
    0: #000000,
    10: #171d16,
    20: #2b322b,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
  ),
);

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

$_custom: map.merge(map.get($_palettes, primary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
    use-system-variables: true,
  ),
  typography: (
    use-system-variables: true,
  ),
));

我在styles.scss中的使用方式如下：

@use './m3-theme';
.tertiary-checkbox {     
  @include mat.button-color(m3-theme.$light-theme, $color-variant: primary)
}

核心问题是混淆了Material 2（M2）和Material 3（M3）的主题体系：

• M2中的accent和warn在M3中已被替换，warn对应M3的error，accent可以用secondary/tertiary替代，也可自定义颜色变体。
• 当前M3主题配置未声明secondary和error，导致无法调用这些颜色组。

步骤1：完善M3主题配置 #

在m3-theme.scss中补充secondary和error的定义：

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    secondary: map.get($_palettes, secondary), // 添加secondary
    tertiary: $_tertiary,
    error: map.get($_palettes, error), // 添加error（对应原warn）
    use-system-variables: true,
  ),
  typography: (
    use-system-variables: true,
  ),
));

步骤2：为mat-button设置对应颜色变体 #

1. 实现原warn效果（error颜色按钮）

在styles.scss中创建对应类：

@use './m3-theme';

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

2. 实现原accent效果（secondary/tertiary颜色按钮）

用secondary或tertiary模拟accent：

// 用secondary实现accent效果
.accent-button {
  @include mat.button-color(m3-theme.$light-theme, $color-variant: secondary);
}

// 或用tertiary实现
.tertiary-accent-button {
  @include mat.button-color(m3-theme.$light-theme, $color-variant: tertiary);
}

步骤3：HTML中使用类 #

<!-- 原warn效果按钮 -->
<button mat-button class="warn-button">警告按钮</button>

<!-- 原accent效果按钮 -->
<button mat-button class="accent-button">强调按钮</button>

自定义调色板额外方案 #

若需要完全独立的accent调色板，可在m3-theme.scss中定义后直接传入：

// 自定义accent调色板
$_custom-accent: (
  0: #000000,
  10: #1a005e,
  20: #31009e,
);

// 应用到按钮
.custom-accent-button {
  @include mat.button-color(m3-theme.$light-theme, $color: $_custom-accent);
}

内容的提问来源于stack exchange，提问作者raju