[Css Var Change Runtime] CSS variables not always working in demo
css-var-change-runtime
Reactive icon
Forge component by Leonardo Pires
Application Type
Reactive

Hi Leonardo,

Just to let you know. The color variables neutral-x are not working in the demo. As you can see in the screenshot the variable is not filled correctly.

Best,

Bart

Hi Bart This is just an example, did you download the demo and see how the component works?

You just need to inform the color directly in the Value and it will be modified in the variable, following the example below.

The ideal is for you to download it to understand how it works.

These colors were extracted from an outsystems color table, so you must be confused, and some colors in this table are named after variables, instead of the color itself.

Hi Bart.
Thanks for sharing this, i fixed thats colors, and upload a new version, marker this post with solution, if that fix your asked.

Regards

Hi Leonardo,

Am I correct to say that you removed those colors? I do not see them anymore in the dropdown.

Best,

Bart

Yes, i made a filter to remove colors that weren't working.


If this is resolved, please mark it as a solution.

Regards

Hi Leonardo,

For demo purposes this is most probably ok, but I am not sure this solved the problem. If you see the color 'grape' in the demo you can seet that it is still not working. I guess that is the same problem as the 'neutral' colors that were not working earlier.

In my opinion it should work with every color and every css variable defined.

Best,

Bart

Hi Bart This is just an example, did you download the demo and see how the component works?

You just need to inform the color directly in the Value and it will be modified in the variable, following the example below.

The ideal is for you to download it to understand how it works.

These colors were extracted from an outsystems color table, so you must be confused, and some colors in this table are named after variables, instead of the color itself.

Hi Leonardo,

Thanks for the explanation. I know the demo is just an example. I just wanted to make sure it was working correctly. Most of the time I only download the component if I see a properly working demo. In this case the demo was not working properly but with the explanation you just have me I understand why it was not working :-)

Best,

Bart

No problem, if you have any further questions then ask. :)

Regards.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.