如何在Angular Material中设置文本颜色？解决升级后文本过浅问题

问题原因 #

Angular Material 16及以上版本采用了Material Design 3 (M3) 主题系统，旧版主题配置中的text/secondary-text字段已被废弃，取而代之的是基于「表面色（surface）」和「表面上的颜色（on-surface）」的配色逻辑，默认文本颜色会根据主题调色板自动生成，导致部分场景下文本过浅、可读性下降。

解决方案 #

方法1：自定义主题核心文本颜色 #

在主题定义中直接指定on-surface（主要文本）和on-surface-variant（次要文本）颜色，这是M3主题系统的标准配置方式：

@use '@angular/material' as mat;

$my-theme-primary: mat.define-palette(mat.$green-palette, 700, 800, 900);
$my-theme-accent: mat.define-palette(mat.$orange-palette, A200, 300, A400);
$my-theme-warn: mat.define-palette(mat.$red-palette);

$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-theme-primary,
      accent: $my-theme-accent,
      warn: $my-theme-warn,
      // 主要文本颜色（替代旧版text）
      on-surface: #000000,
      // 次要文本颜色（替代旧版secondary-text）
      on-surface-variant: #333333,
    ),
  )
);

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

方法2：通过核心配置全局设置文本颜色 #

在调用mat.core()时传入全局文本颜色参数，直接覆盖默认的文本配色：

@use '@angular/material' as mat;

// 先配置核心参数，指定全局文本颜色
@include mat.core(
  (
    // 主要文本颜色
    body-color: #000000,
    // 次要文本颜色
    body-secondary-color: #333333,
    // 可选：配置标题等其他文本颜色
    headline-color: #000000,
  )
);

// 后续主题定义保持不变
$my-theme-primary: mat.define-palette(mat.$green-palette, 700, 800, 900);
$my-theme-accent: mat.define-palette(mat.$orange-palette, A200, 300, A400);
$my-theme-warn: mat.define-palette(mat.$red-palette);

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

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

方法3：自定义排版配置 #

如果需要针对不同文本样式（如body-1、body-2、标题等）单独设置颜色，可以自定义排版配置：

@use '@angular/material' as mat;

// 自定义排版样式的颜色
$custom-typography: mat.define-typography-config(
  (
    body-1: (
      color: #000000,
    ),
    body-2: (
      color: #333333,
    ),
    headline-1: (
      color: #000000,
    ),
    // 按需配置其他排版样式
  )
);

// 主题定义保持不变
$my-theme-primary: mat.define-palette(mat.$green-palette, 700, 800, 900);
$my-theme-accent: mat.define-palette(mat.$orange-palette, A200, 300, A400);
$my-theme-warn: mat.define-palette(mat.$red-palette);

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

@include mat.core();
// 应用自定义排版
@include mat.all-component-typographies($custom-typography);
@include mat.all-component-themes($my-theme);

方法4：全局样式强制覆盖（兜底方案） #

如果上述主题配置方法未生效，可以在全局样式文件（如styles.scss）中添加强制覆盖规则：

/* 主要文本样式覆盖 */
.mat-body, .mat-body-1, .mat-typography {
  color: #000 !important;
}

/* 次要文本样式覆盖 */
.mat-body-2, .mat-secondary-text {
  color: #333 !important;
}

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