Using css variable in Angular template HTML?



I have a component that sets the background color of a div based on a value stored in a json file, which I then loop through to show a bunch of color swatches.

<div class="color-swatch-color"

It works fine with a hex color in the variable: foo="#f00";

But no color shows up what I use a color variable: foo = 'var(--primary)';

The div shows in the HTML, no errors are thrown, but there is no background-color at all on the div.


I should be clearer. I have a theme that uses variables like --primary, --secondary (like Bootstrap). I want to show swatches with those colors. However, I use the variables in my CSS classes so that I can can change their value with a "theme" class on the body tag.

So I am trying to set my swatches to the variables so that when the user changes the class on the body tag, the swatch changes color automatically like the rest of my app.

Take a look at this stackblitz. If I assign the var directly, it assigns the background color. Via the angular variable it doesn't assign any color.

I am doing it this way because if you open dev tools, you can select my brandcolor variable and change it on the fly; this is similar to switching themes, where "brandcolor" can vary accoss themes

Continue reading...