Is there a method to extract the main color from an angular material theme and apply it in the css files of an angular project?
Within a project, we can specify the primary color in a *.scss document as shown below:
@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-green, 800);
$accent: mat-palette($mat-teal, 600, A100, A400);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
I attempted to utilize *.scss documents in my components, but encountered issues with the $primary
variable not being recognized:
//*.scss file
//...
.myclass {
background: $primary; //Upon compiling, this line triggers an error 'Undefined variable: "$primary".'
}