How to change primary text color in Angular Material?

Question

I'm using Angular Material v13.0.1 and I'm trying to change the color of text in my button.

<button
  mat-raised-button
  color="primary"
  (click)='submit()'
  [disabled]='btnDisabled'
>Save</button>

In my theme.scss I have:

// theme.scss

$theme-primary: mat.define-palette(mat.$green-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$theme-foreground: mat.define-palette(mat.$green-palette);

// The warn palette is optional (defaults to red).
$theme-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual theming systems such as "color" or "typography".
$theme: mat.define-light-theme((
  color: (
    primary: $theme-primary,
    accent: $theme-accent,
    warn: $theme-warn,
    foreground: $theme-foreground
  )
));

The button does turn green according to the $theme-primary but the text color is black, and I want to change it to white. I tried adding foreground in the theme definition but it doesn't seem to do anything.

Any tips on how to change the default font color of a theme?

Answer 1

Angular Material uses pallets for its theming. You can create your own pallet using this tool .

The define-palette Sass function accepts a color palette as well as four optional hue numbers. These four hues represent, in order: the "default" hue, a "lighter" hue, a "darker" hue, and a "text" hue.

In your case, you need to update your palette, to define which color from the palette you would like to use as the text color (the last argument):

$theme-primary: mat.define-palette(mat.$green-palette, A200, A100, A400);