如何通过自定义主题修改mat-button文本颜色？遇文本未正常变白问题

我之前也碰到过一模一样的情况——Angular Material的主题系统有时候对高亮度的accent色调，不会自动把文本切换成白色，导致按钮背景是预期的浅蓝，但文本还是灰扑扑的。这里有两个靠谱的解决办法：

方法一：自定义调色板的对比色（推荐） #

Angular Material的mat-palette函数支持自定义对比色配置，我们可以直接在accent调色板里明确指定默认状态下的文本颜色为白色。修改你的theme.scss里的accent定义：

$candy-app-accent: mat-palette($mat-light-blue, A400, A100, A700, (
  contrast: (
    default: white,
    lighter: black,
    darker: white
  )
));

这样主题系统就会根据你设置的对比色规则，自动给accent按钮应用白色文本，完全符合Material Design的主题规范，后续换色调也不用额外改样式。

方法二：直接覆盖按钮样式（快速应急） #

如果不想改动主题配置，也可以在全局CSS或者组件的样式文件里直接强制设置文本颜色：

.mat-raised-button.mat-accent {
  color: white !important;
}

不过这种方式属于硬编码样式，灵活性差一些，后续如果更换accent色调的话，还得跟着调整这个样式。

为什么会出现这个问题？ #

mat-light-theme的默认对比色逻辑是基于颜色亮度自动计算的，对于$mat-light-blue A400这种亮度较高的颜色，系统可能没有判定为需要切换到白色文本，手动指定contrast参数就能修正这个判定偏差。

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