如何修改Angular Material主题中primary按钮的默认文本颜色

问题原因 #

你配置的foreground参数不生效，是因为Angular Material 带色值的按钮（color="primary/accent/warn"）文本颜色，是从对应色调色板的对比度文本字段读取，而非全局foreground配置。你直接使用默认的mat.$green-palette时，主色阶默认的对比度文本为黑色，因此出现背景变绿但文字仍为黑色的问题。

修复方法 #

方法1：自定义主调色板的对比度规则（推荐，符合主题设计规范） #

修改theme.scss中$theme-primary的定义，在mat.define-palette的第四个参数传入对比度调色板，指定主色对应文本为白色：

// theme.scss 修改部分
// 四个参数分别为：基础调色板、默认色阶、较浅色阶、较深色阶、对比度调色板
// mat.$light-theme-contrast-palette 会自动适配深色背景用白色文本
$theme-primary: mat.define-palette(mat.$green-palette, 500, 300, 700, mat.$light-theme-contrast-palette);

其余主题配置保持不变即可，这个修改会全局生效，所有使用color="primary"的组件文本都会自动适配为白色。

方法2：仅覆盖按钮组件的文本样式 #

如果不需要全局修改，只想调整raised按钮的文本颜色，可以在主题配置后添加自定义样式覆盖：

// theme.scss 原有$theme定义保持不变，在文件末尾添加如下代码
@include mat.core();
@include mat.all-component-themes($theme);

// 覆盖primary色raised按钮的文本颜色
.mat-raised-button.mat-primary {
  color: white;
}
// 可选：修改禁用状态下的按钮文本透明度
.mat-raised-button.mat-primary[disabled] {
  color: rgba(255, 255, 255, 0.5);
}

修改完成后重新编译项目即可生效。

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