How to update control's color using CSS once the control is created?

[ethanyhou]

Hi, I have a control that needs to update its color when the user clicks it. However, it seems I can't change its color using CSS after it's been created.

The code snippet:

    private void updateControlBackground(Control control, boolean selected) {
      control.setData(UiConstants.E4_CSS_ID,
          selected ? "quick-start-feature-card-selected" : "quick-start-feature-card");
      control.redraw();
      control.update();

      if (control instanceof Composite) {
        Composite composite = (Composite) control;
        for (Control child : composite.getChildren()) {
          updateControlBackground(child, selected);
        }
      }
    }

We also tried the following code (it didn't work) based on this post on Stack Overflow:

private void updateControlBackground(Control control, boolean selected) {
      // Update CSS ID for styling consistency
      control.setData(UiConstants.E4_CSS_ID,
          selected ? "quick-start-feature-card-selected" : "quick-start-feature-card");

      // Force color update programmatically to override CSS
      IStylingEngine engine = PlatformUI.getWorkbench().getService(IStylingEngine.class);
      if (engine != null) {
        // engine.style(control);
        //engine.setClassname(control, selected ? "quick-start-feature-card-selected" : "quick-start-feature-card");
        engine.style(control);
      }
      control.redraw();
      Display.getCurrent().update();
      control.update();
    }

Instead, the control.setBackground() works, but I need to hardcode the color which isn't ideal for me since I want the color to adapt to different themes. Here is my current workaround that only adapt to the light mode:

private void updateControlBackground(Control control, boolean selected) {
      // Force color update programmatically to override CSS
      Color backgroundColor = selected ? new Color(Display.getCurrent(), 241, 241, 242) : // #F1F1F2
          new Color(Display.getCurrent(), 255, 255, 255); // #FFFFFF

      control.setBackground(backgroundColor);

      // For Labels, also set foreground if needed
      if (control instanceof Label) {
        Color textColor = new Color(Display.getCurrent(), 0, 0, 0); // Black text
        control.setForeground(textColor);
      }

      // Don't dispose colors immediately - store them for later disposal
      control.setData("bg_color", backgroundColor);

      // Add dispose listener to clean up colors
      control.addDisposeListener(e -> {
        Color bgColor = (Color) control.getData("bg_color");
        if (bgColor != null && !bgColor.isDisposed()) {
          bgColor.dispose();
        }
      });

      if (control instanceof Composite) {
        Composite composite = (Composite) control;
        for (Control child : composite.getChildren()) {
          updateControlBackground(child, selected);
        }
      }
    }

BTW, the control also includes Labels

Any ideas? Thanks!"

[ethanyhou]

Hi @iloveeclipse , could you please help us take a look of this issue?

[iloveeclipse]

@ethanyhou : I'm not experienced in e4 css styling engine.

I guess what you can do is to read the current css theme and depending on that set color but this doesn't answer your question.

[ethanyhou]

Thank you for your reply, @iloveeclipse . Could you please recommend someone who might have expertise in Eclipse CSS styling? We have lots of composites that need to be migrated to use CSS styling to improve the user experience, and we're currently stuck on this.

[iloveeclipse]

Regarding the someone with CSS expertise... Wild guess: @sratz or @ptziegler were recently working on e4 code, might be they know css part of it?

@ethanyhou : I would recommend to provide a sample self contained plug-in project that demonstrating the problem with what you are doing in the "real" application. If no one answers, I could try to debug it.

[ethanyhou]

Hi @iloveeclipse ,

Thank you for your help. I created a sample project here:
CssUpdateDemo.zip

In the file CssUpdateDemo\src\cssupdatedemo\handlers\OpenQuickStartHandler.java's updateControlBackground method, we expect the feature card can update its background when it is clicked, however, the Label of the card cannot be updated:

You can press M1 +7 to invoke the card.

[ethanyhou]

Hi @sratz and @ptziegler , could you please help us take a look of this issue? Thanks.

[ptziegler]

@ethanyhou I'm by no means an expert in CSS, but isn't the issue simply that the class isn't updated recursively for all widgets?

i.e. this PoC seems to behave like your snippet with the hardcoded values:

private void updateControlBackground(Control control, boolean selected) {
	// Update CSS ID for styling consistency
	updateControlBackground2(control, selected);

	// Force color update programmatically to override CSS
	IStylingEngine engine = PlatformUI.getWorkbench().getService(IStylingEngine.class);
	if (engine != null) {
		// engine.style(control);
		engine.setClassname(control,
				selected ? "quick-start-feature-card-selected" : "quick-start-feature-card");
		engine.style(control);
	}
	control.redraw();
	Display.getCurrent().update();
	control.update();
}

private void updateControlBackground2(Control control, boolean selected) {
	control.setData("org.eclipse.e4.ui.css.id",
			selected ? "quick-start-feature-card-selected" : "quick-start-feature-card");
	if (control instanceof Composite composite) {
		for (Control child : composite.getChildren()) {
			updateControlBackground2(child, selected);
		}
	}
}

Screencast.webm

[ethanyhou]

Thank you @ptziegler, this is really helpful!

We're able to update the CSS styles successfully!