How to extract colors from a palette in Material 3

Question

With Material 2 (Angular 17) I used to extract colors with: mat.get-color-from-palette($primary, 800). What would be the equivalent in Material 3 (Angular 18)?

Answer 1

I think it is easier to just extract your get colour function from the M3 scss Library.

@function get-palette-color($palette, $hue) {
  $result: map.get($palette, $hue);
  @if not $result {
    $supported-hues: map.keys($palette);
    @error #{'Valid hues for'} $palette-name #{'are: #{$supported-hues}. Got:'} $hue;
  }
  @return $result;
}

Now you can do a button override for example, like this:

@use '@angular/material' as mat;
@use './colors.scss' as colors;


.primary {
  @include mat.button-overrides(
    (
      filled-container-color: colors.get-palette-color(colors.$primary-palette, 50),
      filled-label-text-color: red,
    )
  );
}

The colors file was generated by the palette generation schematic: https://material.angular.io/guide/theming#prebuilt-color-palettes.

I prefer not having to pass in the $theme for my overrides, because I tend to use different files.