JAVAFX: Changing Stage window color with JFOENIX

Question

I've been using JFOENIX library to make a material design desktop application, and From the JFOENIX demo, I've seen that the stage window is change to something like the below image:

I wanted to do the same, but I found nothing topic about it. Anyone here is using JFOENIX and achieve the same as I want? How to do it?

Answer 1

Have a look at this demo. You can create a JFoenix decorator with the following code:

import com.jfoenix.controls.JFXDecorator;

Parent root = something; // your root container

JFXDecorator decorator = new JFXDecorator(stage, root);
decorator.setCustomMaximize(true);
Scene scene = new Scene(decorator, 500, 500);

This will result in a black decorator. After looking at this css file I thought you could change the color with the following css code:

.jfx-decorator {
    -fx-decorator-color: blue;
}

.jfx-decorator .jfx-decorator-buttons-container {
    -fx-background-color: -fx-decorator-color;
}

.jfx-decorator .resize-border {
    -fx-border-color: -fx-decorator-color;
    -fx-border-width: 0 4 4 4;
}

Unfortunately, the decorator was still black. I couldn't find any additional documentation so I really can't say how you can change the decorator color. I hope I could help.

Answer 2

I can't find any direct method to change jfx-decorator color directly, so I used the following code and that works for me!

Inside your java code,

Stage stage = new Stage();
Parent root = FXMLLoader.load(getClass().getResource("FXML_FILE"));
/*...*/
JFXDecorator decorator = new JFXDecorator(stage , root);
decorator.setCustomMaximize(true);                  
String uri = getClass().getResource("CSS_PATH").toExternalForm();
Scene scene = new Scene(decorator);
scene.getStylesheets().add(uri) ;
stage.setScene(scene);
stage.show();

Inside the css file,

.jfx-decorator {
    -fx-decorator-color: #272727;
}

.jfx-decorator .jfx-decorator-buttons-container {
    -fx-background-color: -fx-decorator-color;

}

.jfx-decorator .resize-border {
    -fx-border-color: -fx-decorator-color;
    -fx-border-width: 0 2 2 2;
}