How to pick variation of Material color for styling an Angular Component

Question

Is there a way to define which palette variation will be used when setting the color to accent(or primary)?

For example I wish to set the background-color for my toolbar to A100 but Angular Material will pick 300 by default.

I have defined a custom theme:

@include mat-core();
$my-app-primary: mat-palette($mat-light-blue);
$my-app-accent: mat-palette($mat-grey, 300, 200, A100);
$my-app-warn: mat-palette($mat-deep-orange);

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

@include angular-material-theme($my-app-theme);

And I wish to set the toolbar background color to one of my selected palette's variation:

<mat-toolbar color="accent"> <!-- how to set accent variation -->
    <span>My Application</span>
</mat-toolbar>

I know that I can overwrite the css. If that's the way to go, how can I reuse the variables defined in _theming.scss so I won't deviate from palette's colors?

Answer 1

You can access color variations from any set angular material theme by importing material and your used theme into the style file:

@use "@angular/material" as mat;
@use "path/to/your/theme/file" as customTheme;

Afterwards, you can access any color variation as follows:

.customClass {
  background-color: mat.mat.get-color-from-palette(customTheme.$my-app-accent, 200)
}

For more information, you can check the documentation.

Answer 2

You can simple can import your style-variables and then use them.

@import "../../_theming.scss"; // <-- set your path to '_theming.scss'

mat-toolbar {
    background-color: $my-app-primary;
}