Angular Material v15自定义disabled-text颜色配置失效问题

在Angular Material v15中，主题结构发生了嵌套变化，原v14中直接在主题顶层替换foreground配置的方式不再生效。v15的主题对象中，foreground属于color配置的子属性，需要调整合并逻辑才能让自定义的disabled-text等颜色生效。

修改后的完整主题配置代码 #

$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$theme-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme(
  ( 
    color: (
      primary: $theme-primary, 
      accent: $theme-accent, 
      warn: $theme-warn
    ),
    typography: mat.define-typography-config()
  )
);

@function my-mat-light-theme-foreground($color) {
  @return (
    text: var(--color-text-default),
    disabled: var(--color-text-disabled),
    disabled-button: var(--color-text-disabled),
    disabled-text: var(--color-text-disabled),
    divider: rgba(0, 0, 0, 0.12),
    secondary-text: rgba(0, 0, 0, 0.54)
  );
}

$my-foreground: my-mat-light-theme-foreground(mat.get-color-from-palette($theme-primary, 700));

// 关键修改：将自定义foreground嵌套合并到color配置中
$theme-color-config: map-get($my-theme, color);
$updated-color-config: map-merge($theme-color-config, (foreground: $my-foreground));
$my-app-theme-custom: map-merge($my-theme, (color: $updated-color-config));

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

核心逻辑说明 #

v15中mat.define-light-theme生成的主题结构为：

$my-theme: (
  color: (
    primary: ...,
    accent: ...,
    warn: ...,
    foreground: ..., // 前景色配置位于此处
    background: ...
  ),
  typography: ...
)

原代码直接在主题顶层设置foreground，组件会从color子对象中读取配置，因此无法识别顶层的自定义配置。通过先提取color配置、合并自定义foreground后再合并回主题，才能让组件正确读取到自定义的失效文本颜色。

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