Dynamic background color

At a glance

The community members are discussing the ability to dynamically set the background color of UI elements, such as radio buttons, based on external data. One community member suggests using CSS variables to achieve this, where the variable value is defined in the HTML and then used in the CSS. Another community member confirms that this is the correct approach, and provides an example of how to implement it using an HTML embed to set the CSS variable value. The community members agree that this is a useful feature and are looking forward to it being implemented.

ccramses.

Would be cool if you could dynamically choose the background color in an item like a box.

Use case:
Dynamically generated color radio groups.
Different products have different colors.
I guess it´s easy to implement as well.

Just change the #000000 value via text (API) like you would with any other text.

Attachment

12 comments

ccramses.

Here

Attachment

OOleg Isonen

I think what you are asking is the ability to set colors based on external data

JJeremy

@cramses. , not sure if this is what you mean... but here's an example.

I've created a CSS var on my global (let's call it --highlight-color).
I add that var to the items I want, like my radio buttons
If I want a different color on my radio button, I just redefine the --highlight-color var on the section parent. I can move the radio button from one section to another and it will adopt the correct color of that section

ccramses.

Not sure if we´re talking about the same thing. Let me explain my usecase.

I am building an online shop.
Every product has different colors.
What I want is to display the color radios dynamically.
I thought of making a collection of radios where the backround color changes depending on the color I set in my cms.

Do you understand what I mean?

OOleg Isonen

I got it right, you want data driven styling

OOleg Isonen

The way to do it right now:

use html embed to overwrite the css variable

Plain Text

`<style>:root {--whatever-color: ${data.whatever.color}}</style>`

use that css variable as the color where you need it

OOleg Isonen

basically you are taking the data and using it to define the value of the css variable and then using that variable as a value in your color

OOleg Isonen

later once you can bind styles you can delete the html embed and bind data directly to the value in style panel

ccramses.

Thanks Oleg, that is really helpful 👍

SSruly

Just clarifying, this is a coming feature?

OOleg Isonen

Yes

SSruly

Can't wait 🙂

Add a reply

Join the Webstudio community

Dynamic background color