How to extract colors from a palette in Material 3

July 19, 2024

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)?

>Solution :

You can use mat.get-theme-color for this.

Full Detailed Docs for get-theme-color

background-color: mat.get-theme-color($theme, primary, 50) !important;

SCSS:

@use '@angular/material' as mat;

$theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
  )
);

body {
  background-color: mat.get-theme-color($theme, primary, 50) !important;
  @include mat.all-component-themes($theme);
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
  height: 100%;
}

html {
  height: 100%;
}

@include mat.core();
@include mat.color-variants-backwards-compatibility($theme);