how to control CSS file from the Java controller in JavaFX

You can make several themes for this colors. For example, a file called themeRed.css, themeBlue.css

   .root{
    -fx-font-size: 14pt;
    -fx-font-family: "Tahoma";
    -fx-base: #DFB951;
    -fx-background: #A78732;
    -fx-focus-color: #B6A678;
}

And, you have a button that changes colors or themes.

You can set your themes in your app with something like this:

public String themeRed = getClass().getResource("themeRed.css").toExternalForm(); public String themeBlue = getClass().getResource("themeBlue.css").toExternalForm();

and in the button click action, or in the method triggered when a click happens, you can use:

btn.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        scene.getStylesheets().remove(themeRed);
        scene.getStylesheets().add(themeBlue);
        System.out.println("Stylesheets: " + scene.getStylesheets());
        //You can see the stylesheet being used
    }
});

You can play with that to change themes.

The other option is if you just change let's say, one css line, like background in one button for example, you can use the setStyle method in every element you want.

For example:

btn.setStyle("-fx-background: #A78732;");

If for example you are using a ColorPicker colorPicker :

colorPicker.valueProperty().addListener((obs, oldValue, newValue) -> {
            yourAnchorPane.setStyle("-fx-primary : " + newValue);
});

So basically you need to use the setStyle function, add the attribute you want to change and its value like in CSS.
Or else (If you don't want to put an attribute) you can just do something like this to change the color of a label for instance :

label.setTextFill(colorPicker.getValue())

you can create an "CSS Editor"

you will have two css :

myTheme.css :

@import url("main.css");

*{
    -fx-primary :#2A2E37 ;
    -fx-secondary : #FFFF8D;
    -fx-primarytext : #B2B2B2;
    -fx-blue: #1976D2;
    -fx-red: #FF0000;
    -fx-green:#2E7D32; 
}

main.css :

.root{ 
    -fx-background-color: -fx-primary;
}

you will have the same code for your fxml :

<AnchorPane fx:id="rootAnchoreFW" prefHeight="800.0" prefWidth="767.0"
            stylesheets="@../Style/myTheme.css" >

to edit the css you have two option :

• read the CSS file, export data, update it (delete the old CSS file and créate a new file)

• read a config file (txt, JSON, XLM...) to store data of you configaration and recreate the scc with it.

It will be a part of the anwser I think