How do I use a theme color from Angular Material prebuilt themes

Question

I would like to use a specific color from the material theme in my css.

For example

.my_tab_group {
  border: 1px solid $some_color_from_theme;
}

Does Angular Material expose different color shades via some variable, so that I can use in my own .scss file (e.g., like using $some_color_from_theme above)?

Answer 1

You must Import ~@angular/material/theming in your sass file.

Then in your case you can write something like that:

.my_tab_group {
  border: 1px solid map-get($mat-light-theme-background, 'dividers');
}

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