Angular 19中如何覆盖Material主题的accent与warn颜色？

架构老林

2026-6-13

Angular 19 Material 3 修改强调色和警告色的正确方法

Angular 19 默认使用 Material Design 3（M3）主题系统，这套系统和旧版 Material Design 2（M2）的颜色命名规则不同：

原 M2 中的 accent（强调色）在 M3 中对应 tertiary
原 M2 中的 warn（警告色）在 M3 中对应 error

你的报错就是因为在 M3 主题配置里用了 M2 的属性名，把它们替换成 M3 的命名即可解决问题。

修正后的主题配置代码

html {
  @include mat.theme(
    (
      color: (
        theme-type: light,
        primary: palette.$primary-palette,
        tertiary: palette.$tertiary-palette, // 替代原accent颜色
        error: palette.$error-palette, // 替代原warn颜色
      ),
      typography: (
        plain-family: 'Arial, Helvetica, sans-serif',
      ),
    )
  );
}

补充说明

如果你的调色板中没有定义 $error-palette，可以通过以下两种方式生成：
- 用 Angular CLI 命令生成：
```
ng generate @angular/material:theme-color error
```
- 手动定义调色板：
```
$error-palette: mat.define-palette(mat.$red-palette);
```
组件层面依然可以使用 color="accent" 或 color="warn" 属性，M3 组件会自动映射到 tertiary 和 error 颜色，无需修改组件代码。