Angular 13升级至16后自定义主题主色失效及编译错误排查

错误原因分析 #

1. Undefined function 错误 #

styles.scss 中调用 custom-theme.theme() 时，SCSS 模块系统无法识别未正确导出的函数。要么确保函数被导出，要么直接使用主题变量更简单。

2. 调色板无效值错误 #

你在定义 $my-orange 和第一个 $my-accent 时，错误地将 mat.define-palette 的第二个参数传为完整颜色映射。mat.define-palette 的正确用法是：第一个参数为 Material 基础调色板，第二个参数为主色调的 key（如 500），后续参数可选指定浅/深色调。若要完全自定义调色板，需先创建符合 Material 格式的映射，再传入 define-palette。

修复步骤 #

步骤1：修正 custom-theme.scss #

移除错误的调色板定义，改用正确方式创建自定义主题：

@use "@angular/material" as mat;

// 方式1：基于现有 Material 调色板定义主色
$my-primary: mat.define-palette(mat.$pink-palette, 500, 100, 700);

// 方式2：完全自定义 accent 调色板（含对比度配置）
$my-custom-accent-palette: (
  50: #ffffff,
  100: #ffffff,
  200: #ffffff,
  300: #ffffff,
  400: #ffffff,
  500: #ffffff,
  600: #ffffff,
  700: #ffffff,
  800: #ffffff,
  900: #ffffff,
  A100: #ffffff,
  A200: #ffffff,
  A400: #ffffff,
  A700: #ffffff,
  // 必须添加对比度配置，否则组件文本可能显示异常
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: white,
    A400: white,
    A700: white,
  )
);
$my-accent: mat.define-palette($my-custom-accent-palette);

// 定义浅色主题
$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-primary,
      accent: $my-accent,
      // 可选添加警告色
      // warn: mat.define-palette(mat.$red-palette)
    ),
    typography: mat.define-typography-config(),
    density: 0,
  )
);

// 导出主题变量（供 styles.scss 导入使用）
@export $my-theme;

步骤2：修正 styles.scss #

直接使用导出的主题变量，无需函数调用：

@use "@angular/material" as mat;
@use "./custom-theme" as ct;

// 初始化 Material 核心样式
@include mat.core();

// 应用主题到所有组件
@include mat.all-component-themes(ct.$my-theme);

额外说明 #

• 若你需要保留自定义函数的方式，需在 custom-theme.scss 末尾添加 @export theme;，确保函数被模块系统导出。
• 升级到 Angular Material 16 后，务必遵循新的 SCSS 模块语法（@use 替代 @import），避免混合使用旧语法导致的冲突。
• 自定义调色板时必须包含 contrast 映射，否则按钮、卡片等组件的文本颜色可能无法适配背景。

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