How I can give a text in my component a color?

Question

I use angular materials to design my app:

material themes

I use a .scss file:

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-red, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, 
$candy-app-warn);
@include angular-material-theme($candy-app-theme);

and it works really fine with material components, e.g. like:

<mat-slide-toggle>Slide me!</mat-slide-toggle>

My question would be how I can give a text in my component a color:

<h1 class="candy-app-primary">  // this does  not work but I would need something like this
  Welcome to {{title}}!
</h1>

Answer 1

Use the mat-color function for colors (ensure that this is in the same file as where you declared your theme):

.candy-app-primary {
    color: mat-color($candy-app-primary);
}