Style color variable

Support
#1

How can I change a style color foreground of a component (for a example Label component), dynamically ? I’ve an Entity with a property field Color, I need to bind this field with color of Label.

#2

Hi, @fala70

You cannot change style variable at runtime, but you can write your own CSS rules and use addStyleName() & removeStyleName() methods at runtime.

Regards,
Daniil.

#3

where can I find a sample ?

#4

so should I create a style for each color ?

#5

Hi, take a look at this topic Change row or column color based on color selection from ColorPicker - CUBA.Platform

#6

I think that is not good solution for my case, I haven’t a table componet. I am using VBox with style "Card, I want change color background like this. I should add string background-color:xxxxxx to style attribute of div. I haven’t a predefined color, so I can’t create predefined style to load.

image

#7

Described approach with styles injection works not only with Table.

You can inject CSS the same way:

protected void injectColorCss(String color) {
    Page.Styles styles = Page.getCurrent().getStyles();
    styles.add(String.format(
            ".colored-panel-%s { background-color: #%s; }",
            color, color));
}

Then assign CSS class using setStyleName(".colored-panel-red").

Unfortunately, there is no direct access from server UI code to DOM tree, because UI components encapsulate their DOM structure and logic executed in a web browser.

#8

Hi

Is it possible to do the same, this way of injecting CSS, in the Calendar component?
Need to change the background color of the events and creating different styles is not feasible in my project.

Thanks

#9

Yes,
Just inject the styles using the same way and use them in your Calendar style provider dynamically. If you will have any trouble with this approach please open a separate topic and describe your problem there