Using Angular get-color-from-palette to Retrieve Color Values | Task

Ole Ersoy
May - 26  -  1 min

Scenario

We have defined our SASS Angular Material Accent color palette like this.

$theme-accent: mat.define-palette(mat.$cyan-palette);

And now we wish to retrieve a text color and background-color from it using the default key (500).

Approach

html,
body {
height: 100%;
background-color: mat.get-color-from-palette($theme-accent, default);
color: mat.get-color-from-palette($theme-accent, default-contrast);
}
For the background-color we use the default key, and for the text color we use the default-contrast key.

For the background-color we use the default key, and for the text color we use the default-contrast key.

Demo