How to apply angular-material built in theme variables in component style?

Question

I wanted to create a dynamic background-color for my .active class of my mat-list-item

HTML:

<mat-list-item
      *ngFor="let page of pages"
      matRipple
      routerLinkActive="active"
    >
      <a [routerLink]="page.path" (click)="drawer.close()"
        ><mat-icon class="mat-18">{{ page.iconName }}</mat-icon
        >{{ page.name }}</a
      >
</mat-list-item>

So now basically assigning .active {background: red} works as expected. What I wanted to do is apply the built in theme $primary color value. I'm using Angular Material indigo-pink theme so I've tried doing the following

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

.active {
  background-color: $primary;
}

This throws error

ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
   ╷
   │   background-color: $primary;
   │                     ^^^^^^^^
   ╵

Anything that I missed?

Answer 1

I have been working a while to get this working as expected. This is a compilation of what I have done to make this work more or less smoothly with few lines of codes (using angular 11):

1. I changed all my files from css to scss following the first answer of this
2. I created a style to contain this primary variables:
   2.1. At the same level of app I created a folder styles with the name styles and inside a file _variables.scss with this content:

@import '~@angular/material/theming';
// Theme configuration
$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);

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

2.2. I add the file to my styles inside angular.json:

...
            "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "src/styles/_variables.scss"
            ],
            "scripts"
...

3. From my component my-component.scss)I was now able to access the file and variables like this:

@import "~/src/styles/_variables.scss";

.primary {
  color: mat-color($primary) !important;
}

Answer 2

Color variables are declared in scss files, while you are importing css. I.e. you cannot get sass variables via importing compiles css files.

If you want doing it properly you need to follow https://material.angular.io/guide/theming-your-components guidelines.

E.g. getting material colors:

@import '~@angular/material/theming';

$primary: mat-palette($mat-indigo);
$accent:  mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
  )
));

$color: mat-get-color-config($theme);

$primary: map-get($color, primary); 

.candy-carousel {
    // Use mat-color to extract individual colors from a palette.
    background-color: mat-color($config); // color will be there
    border-color: mat-color($config, A400); // a bit different hue
}