Angular Material 18 (Material Design 3) theming - get color from theme and write into a custom property

Question

I use Angular Material 18 in my little pet project and have custom theme defined. I can access the variable and (for example) set it as a text:color like so:

.some-selector {
  color: mat.get-theme-color(material-theme.$my-theme, "primary", 50);
}

This does work, but it feels so ugly to have that ~60 characters in multiple places all around my application. Also, if I do this in a component I'd have to first add these lines as well:

@use '@angular/material' as mat;
@use '../../../styles/material-theme';

Isn't there a better way? What I want is to define some sort of alias (e.g. custom property in CSS) and just use that one. Like so:

html {
  --my-alias: mat.get-theme-color(material-theme.$my-theme, "primary", 50);
}
// in all other places
.some-selector {
  color: var(--my-alias);
}

This simply does not work. What am I missing here?

Answer 1

You should add braces:

--my-alias: #{mat.get-theme-color(material-theme.$my-theme, primary, 50)};