angular material 2 custom theme button contrast

Question

i just started using angular and angular material theming, created new theme with custom palettes.

to generate custom palette i used this tool http://mcg.mbitson.com/#!?mcgpalette0=%233f51b5

it works great https://stackblitz.com/edit/angular-material-custom-theme-button-contrast?file=styles.scss but only problem is how i can have button text color white over green background ? i tried different numbers but nothing worked

$my-primary: mat-palette($mat-my-green, 500, 50, 50);
$my-accent: mat-palette($mat-my-black, 500, 900, 400);

using

.mat-raised-button{
    line-height: 29px;
    margin-right: 8px;
    &.mat-primary{
      color: mat-contrast($mat-keldano-green,900); // get the contrast color
    }}

this works but i don't think this is good solution another problem is stepper component step numbers also have contrast issue

Answer 1

Button uses 500 as the background color - at least in your setup. In your config, you state that contrast color to 500 is #000000. Set it to #ffffff and you're good to go.

The contrast property tells Material what color to choose over the color background. So the line 100: #000000 means "when the background is 100, use #000000 as the text color". This ensures text readability.

Material uses 3 color shades for their elements. These colors are selected by calling mat-palette.

$my-primary: mat-palette($mat-my-green, 500, 50, 50);

That call tells Material to use 500 as the "main" shade, 50 as the darker and 50 as the lighter. Therefore the button has 500 color and then the contrast color get's selected for the text.

To make the text over 500 white:

contrast: (50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
));

https://stackblitz.com/edit/angular-material-custom-theme-button-contrast-8ma1fp?file=styles.scss