[Fixed] How do I use root CSS variables on an Angular component?

Issue

I tried to do it, like this:

this.elementRef.nativeElement.style['--config-use-images'];

and

document.documentElement.style.getPropertyValue('--config-use-images');

Both did not work. The variable is definitely there. I can see it in the dev tools under :root. With the first one I get an undefined and the second one an empty string when I log it in the console.

Solution

Try this:

getComputedStyle(document.documentElement).getPropertyValue('--config-use-images')

Or

getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--config-use-images')