material 2 paletta contrast color

Question

In the paletta, I can see contrast. How can I choose a contrast color?

works:

scss
mat-color($button-primary);

Not working

scss 
mat-color($button-primary, contrast(900));

See on the bottom it says contrast.

scss
$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

How can I use the contrast?

Dilvane Zanardine · Answer 1 · 2017-07-19T17:21:34.257

35

color: mat-contrast($mat-red, 900);

Link for reference: https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/core/theming/_theming.scss#L4

edited Jul 19 '17 at 17:21

answered Jul 19 '17 at 14:04

Dilvane Zanardine

2,118
3
23
23

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/16762211) – Vivz Jul 19 '17 at 16:25
@Vivz This function, inside the angular material sass, isn't documented. I updated and add a link from github code that can help understand how this function works. – Dilvane Zanardine Jul 19 '17 at 17:21
I almost missed this because of the -1. This solves my problem, I voted up so people know this is the solution. – micksatana May 12 '18 at 13:47

score 10 · Answer 2 · edited Jun 03 '17 at 17:25

10

The solution is:

.test {
  color: mat-color($button-primary, 900-contrast)
}

edited Jun 03 '17 at 17:25

Paul Roub

36,322
27
84
93

answered Jun 03 '17 at 16:30

Patrik Laszlo

4,906
8
24
36

1

this works perfectly for me on angular 14 material theme – C Alonso C Ortega Sep 29 '22 at 21:09

score 9 · Accepted Answer · answered Jul 31 '18 at 13:35

If you use custom themes, sometimes it is useful to get the contrast for the default, lighter or darker presets. For example, in your styles.scss you can set the following custom theme:

$default-primary: mat-palette($mat-blue, 500, 300, 700);
$default-accent: mat-palette($mat-red, 500, 50, 900);
$default-warn: mat-palette($mat-deep-orange);        

$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);

@include my-component-theme($default-theme);

Then, in your component theme you can do the following:

@mixin my-component-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .test {
      color: mat-color($primary, default-contrast); // or 'lighter-contrast' or 'darker-contrast'
  }
}

score 1 · Answer 4 · answered Jun 02 '22 at 16:16

The current design for that function is this.

/// For a given hue in a palette, return the contrast color from the map of contrast palettes.
/// @param {Map} $palette The palette from which to extract a color.
/// @param {String | Number} $hue The hue for which to get a contrast color.
/// @returns {Color} The contrast color for the given palette and hue.
@function get-contrast-color-from-palette($palette, $hue) {
  @return map.get(map.get($palette, contrast), $hue);
}

It can be called like this:

@use '@angular/material' as mat;
$contrast: mat.get-contrast-color-from-palette($theme-accent, 500);
@debug $contrast;

Here's a stackblitz demo: https://stackblitz.com/edit/angular-r9tzuk-tjzksg?file=src%2Fstyles.scss

material 2 paletta contrast color

4 Answers4

Linked