0

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?

Kirubel
  • 1,461
  • 1
  • 14
  • 33

2 Answers2

3

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"
...
  1. 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;
}
nck
  • 1,673
  • 16
  • 40
0

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
}
Stanislav Berkov
  • 5,929
  • 2
  • 30
  • 36
  • Throws `$map: null is not a map` – Kirubel Aug 20 '20 at 09:01
  • What version of angular material do you use? My example is for v10, other versions have a bit different syntax. – Stanislav Berkov Aug 20 '20 at 09:02
  • Mine is also `v10`. I'm so confused right now while using `hues`. What if I want to use a different palette color? Like for example I want it to use `lighter` value of the primary color. How should I do that? – Kirubel Aug 20 '20 at 09:04
  • If you want a bit different color you need to specify second argument for `mat-color` mixin. I updated the example. `mat-color` also supports opacity. – Stanislav Berkov Aug 20 '20 at 09:11