Angular Material v15主题配置报错（从v14升级）求助

算力阿峰

2026-8-11

Angular Material v15主题配置错误解决

问题根源

错误提示里的$color: null是因为warn调色板未用mat.define-palette处理。Angular Material v15中，mat.define-light-theme的color配置项里，primary、accent、warn都需要是经mat.define-palette生成的结构化调色板对象，你直接传入原始的mat.$red-palette变量，导致内部样式生成时无法获取有效颜色值，触发null错误。

修复步骤

把warn配置改为用mat.define-palette处理mat.$red-palette，并指定默认色调（比如500）。

修改后的完整代码

$lightBlue-palette: (
  50:  #f1f7f7,
  100: #d4f0f8,
  200: #a4e3f0,
  300: #6dc7da,
  400: #08badd,
  500: #2687a2,
  600: #216e88,
  700: #1d536a,
  800: #16384d,
  900: #0e2335,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: white,
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
  )
);

$my-primary: mat.define-palette($lightBlue-palette, 400);
$my-accent: mat.define-palette($lightBlue-palette, 900);
// 修复：用mat.define-palette处理warn调色板
$my-warn: mat.define-palette(mat.$red-palette, 500);

$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent: $my-accent,
    warn: $my-warn // 使用处理后的warn调色板
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

@include mat.all-component-themes($my-theme);