Angular Material variables in scss

Question

I try to define global scss variables related to material colors.

:root {
  --primary-color: mat.get-color-from-palette($my-primary, default);
  --text: mat.get-theme-color($my-theme, foreground, text);
}

While debugging it looks good, I get:

DEBUG: #3f51b5
DEBUG: rgba(0, 0, 0, 0.87)

but in components, when I try to use it like color: var(--primary-color) it has no effect at all. When assigning some primitive value like --primary-color: red it works fine, so the connection between global _theme.scss and my component looks good. Any ideas?

version:

"@angular/material": "^17.3.1"

Answer 1

You need to use #{...} syntax to interpolate mat.get-xxx value.

Make these changes:

:root {
  --primary-color: #{mat.get-color-from-palette($my-primary, default)};
  ...
 }