如何在Angular Material 15中修改文本颜色？

针对你遇到的Angular Material自动根据主色调分配黑白文本颜色的问题，有几种直接的修改方式：

1. 直接修改调色板的contrast配置 #

你定义的$blue-palette里已经包含了contrast字段，这正是控制不同色调下文本颜色的核心配置。不需要依赖默认的$dark-primary-text或$light-primary-text，直接替换成你想要的颜色值即可：

$blue-palette: (
  50: #e3f2fd,
  100: #bbdefb,
  200: #90caf9,
  300: #64b5f6,
  400: #42a5f5,
  500: #2196f3,
  600: #1e88e5,
  700: #1976d2,
  800: #1565c0,
  900: #0d47a1,
  A100: #82b1ff,
  A200: #448aff,
  A400: #2979ff,
  A700: #2962ff,
  contrast: (
    50: #333333, // 自定义深色文本
    100: #333333,
    200: #333333,
    300: #333333,
    400: #333333,
    500: #ffffff, // 自定义白色文本
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: #333333,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff,
  )
);

修改后，每个色调对应的组件文本颜色会自动应用你指定的值。

2. 覆盖全局组件文本样式 #

如果想快速统一调整所有组件的文本颜色，可以在全局样式文件（比如styles.scss）里直接覆盖Angular Material的内置类：

// 修改正文类文本颜色
.mat-body, .mat-body-1, .mat-body-2, .mat-body-strong {
  color: #2d3748;
}

// 修改标题类文本颜色
.mat-headline, .mat-title, .mat-subheading-1, .mat-subheading-2 {
  color: #1a202c;
}

// 修改按钮文本颜色
.mat-button, .mat-raised-button {
  color: #4a5568;
}

这种方式无需改动主题配置，适合快速调整全局文本风格。

3. 自定义主题时配置Typography #

从主题规范层面调整的话，可以在定义主题时传入自定义Typography配置，统一设置全局文本颜色：

// 自定义Typography配置
$my-typography: mat.define-typography-config(
  $body-color: #2d3748,
  $headline-color: #1a202c,
  $button-color: #4a5568
);

// 定义主题时关联Typography配置
$my-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-palette,
    ),
    typography: $my-typography,
  )
);

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

这种方式符合Angular Material的主题设计逻辑，配置更规整。

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