How to use angular material theme colors in your app

Issue

In my angular app I'm using angular material. The theming inside my styles.scss looks like this:

@use '@angular/material' as mat;
@include mat.core();

$ui-primary: mat.define-palette(mat.$indigo-palette);
$ui-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$ui-warn: mat.define-palette(mat.$red-palette);

$typography: mat.define-typography-config(
    $font-family: "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif",
);

$ui-theme: mat.define-light-theme((
    color: (
        primary: $ui-primary,
        accent: $ui-accent,
        warn: $ui-warn,
   ),
   typography: $typography,
));

@include mat.all-component-themes($ui-theme);

Its all working as all the angular material components look nice. Now, however, I would like to use the primary color as the background color of one of my components

Whatever I do, I cannot get the primary color. I tried, for example in styles.scss:

:root {
   --app-primary: #{mat.get-color($ui-primary)};
}

or

$app-primary: mat.map-get($ui-theme, primary);
:root { 
    --app-primary: get-color($app-primary);
}

or

  --app-primary: #{mat.get-color-from-palette($ui-theme, primary)};

None of these work, I get the following error:

(50: #e8eaf6, 100: #c5cae9, 20... trast-contrast": null) isn't a valid CSS value.

It seems that I'm always working on a Palette instead of a css-color. Any suggestions how to do this?

Solution

https://material.angular.io/guide/theming-your-components

:root {
    --app-primary: mat.get-theme-color($ui-theme, primary, default);
}

Answered By - AnnaK