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?

I wrote an article about it: Angular Material Theming with CSS Variables. There is also this video which may help on youtube. — shhdharmen
– shhdharmen, Commented Jul 3, 2024 at 9:51

Andrei Astrouski · Accepted Answer · 2024-09-19 13:25:23Z

2

You should add braces:

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

answered Sep 19, 2024 at 13:25

Andrei Astrouski

1,4651 gold badge9 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mario B Over a year ago

aah, finally. Thank you!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related