Switch between themes in JavaFX

Question

I developed a Java FX application and I use CSS for styling. The app uses the default colors for almost everything, so I've found that by simply adding in the .css a darker base:

/* DarkTheme*/
.root {
   -fx-base: rgba(60, 60, 60, 255);   
}

I get a dark theme effect, and all the colors adjust accordingly. I just cannot find a way to do this programmatically, by adding that line with #setStyle, in fact:

1) What Node am I supposed to use setStyle on? This rule will affect all nodes.

2) What String am I passing to setStyle? I assume:

<node>.setStyle("-fx-base: rgba(60, 60, 60, 255);"); //dark theme
<node>.setStyle("-fx-base: <something>");            //back to light def. theme

3) Once I find the correct element, if I want to go back, how would I go about it? Do I need to call set style again, passing the base color (which I would need to pull from some metadata?), or can I somehow remove the previous style addition?**

The end result should will a Control (button, radiob,..) that allows for a quick switch between dark and light themes.

Answer 1

Apply the style to the node you wish to be styled (including descendants). In your case it's probably the root of your scene.

You can undo the change by setting the style property back to it's old value ("" by default):

Parent sceneRoot = ...

// enable style
sceneRoot.setStyle("-fx-base: rgba(60, 60, 60, 255);");

// disable style
sceneRoot.setStyle("");

---

Alternatively you could use include a CSS stylesheet in the stylesheets of your scene/a node. This would allow you style more individually:

String styleSheetURL = ...

// enable style
scene.getStylesheets().add(styleSheetURL);

// disable style
scene.getStylesheets().remove(styleSheetURL);;