Angular Material 15从旧版主题切换至非旧版后前景色失效问题

问题根源 #

Angular Material 15+的非legacy主题系统，和旧版legacy主题的配置结构完全不同。旧版主题是扁平的Map结构，直接在外层定义foreground/background即可生效，但非legacy主题要求颜色配置必须遵循特定的嵌套规则，直接在mat.define-light-theme的外层或color同级添加这两个属性，不会被主题系统识别。

正确配置方案 #

你需要通过mat.define-light-color-config来构建包含前景色、背景色的完整颜色配置，再传入mat.define-light-theme：

// 1. 定义基础调色板
$my-primary: mat.define-palette(mat.$indigo-palette);
$my-accent: mat.define-palette(mat.$pink-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// 2. 构建包含前景/背景色的颜色配置
$my-color-config: mat.define-light-color-config(
    (
        primary: $my-primary,
        accent: $my-accent,
        warn: $my-warn,
        // 这里配置前景色
        foreground: $mat-light-theme-foreground,
        // 这里配置背景色
        background: $mat-light-theme-background
    )
);

// 3. 生成完整主题
$my-theme: mat.define-light-theme(
    (
        color: $my-color-config,
        typography: mat.define-typography-config(),
        density: 0
    )
);

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

自定义前景色进阶 #

如果需要修改前景色的具体细分值（比如主文本、次要文本、图标颜色等），可以先扩展默认的前景色Map：

// 自定义前景色细节
$custom-foreground: map.merge($mat-light-theme-foreground, (
    text: (
        primary: #2d3748,
        secondary: #4a5568
    ),
    icon: #2d3748
));

// 替换到颜色配置中
$my-color-config: mat.define-light-color-config(
    (
        primary: $my-primary,
        accent: $my-accent,
        warn: $my-warn,
        foreground: $custom-foreground,
        background: $mat-light-theme-background
    )
);

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