How to override JavaFX css by code for complex objects

Question

I use a toggleSwitch in JavaFX from fxControls. I can override by a CSS file this property:

.toggle-switch:selected .thumb-area {
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)), linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);
    -fx-background-insets: 0, 1;
}

But I would like to do it by code to change some colors in the component (for example the blue background in selected mode) but This doesn't work:

String css = ".toggle-switch:selected .thumb-area{-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),linear-gradient(to bottom, derive(#0b99c9, 30%), #0b99c9);-fx-background-insets: 0, 1;}";
toggleSwitch.setStyle(css);

Thanks for your help.

Can you provide a use-case as to why you want to do this in code? It's possible, but ugly, and it's almost certainly possible and cleaner using CSS. If you programmatically want to change the style when the toggle is selected/unselected, you need to register a listener with the selectedProperty() and update the style accordingly for both cases. Furthermore, to access the .thumb-area would require a CSS lookup. Note that the setStyle(...) method is expecting only a style rule, not a selector. — James_D
– James_D, Commented Mar 10, 2020 at 16:02
The code is integrated in a legacy code that have a constant for a color that is used in lot of places in the code (and for some Swing code too), the idea is to reuse this constant instead of css file to have only one place to change the color. — Philippe Peter
– Philippe Peter, Commented Mar 10, 2020 at 16:12
Use a looked-up color. Edit your question to explain what you actually need, and I'll post a much better solution than hacking around with setStyle() on lots of different UI elements. — James_D
– James_D, Commented Mar 10, 2020 at 16:19
Ok I mad it clearer that it's for color customisation (the blue background in my use case), thanks for your help. — Philippe Peter
– Philippe Peter, Commented Mar 10, 2020 at 16:31

James_D · Accepted Answer · 2020-03-10 16:33:02Z

1

I think you can do what you're trying to achieve using a looked-up color. In your CSS file, do:

.root {
  -my-selected-control-color: #0b99c9 ;
}

And then define all your styles in terms of the looked-up color you define:

.toggle-switch:selected .thumb-area{
    -fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -20%), derive(-fx-text-box-border, -30%)),
                            linear-gradient(to bottom, derive(-my-selected-control-color, 30%), -my-selected-control-color);
    -fx-background-insets: 0, 1;

}

You can define as many of these as you need.

Now you only have a single place to change the color (in the CSS file) if you need to. You can also modify this programmatically with a single line of code:

// assume root is the root of the UI
// you can always retrieve this with Node root = anyNode.getScene().getRoot();
// This will change all occurrences of -my-selected-control-color to 
// a bright green:
root.setStyle("-my-selected-control-color: #00b140 ;");

Also see this related post.

answered Mar 10, 2020 at 16:33

James_D

211k16 gold badges312 silver badges345 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Philippe Peter Over a year ago

Works like a charm! Thanks a lot

James_D Over a year ago

@PhilippePeter Yes; it's a pretty neat feature. I haven't tried the following for a while, and it's completely undocumented (to the extent that it might not have even been intentional, so it's not necessarily guaranteed to work), but it seems to work with values other than colors (sizes, etc).

Collectives™ on Stack Overflow

How to override JavaFX css by code for complex objects

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related