CODEWITHSUNDEEP
javajavafx
Simen
Simen

Reputation: 1

Scene color becomes white when adding button

The problem I'm having is adding a button to the scene and still maintain the original color of the scene. I have created the scene originally black but when adding the button it becomes white. Do any of you know how to fix this issue?

 @Override
public void start(Stage teater) {
    teater.setTitle("Adventure Game");
    Circle circle = new Circle(200, 100, 30);
    circle.setFill(Color.WHITE);

    Text text = new Text(Integer.toString(resultat));
    text.setFont(Font.font("Calibri", 25));
    text.setFill(Color.BLACK);

    StackPane root = new StackPane(circle, text);
    root.setLayoutX(165);
    root.setLayoutY(90);

    Text text1 = new Text(50, 40, "Adventure Game");
    text1.setFont(Font.font("Edwardian Script ITC", 50));
    text1.setFill(Color.WHITE);

    Button button = new Button("Avslutt");
    button.setTextFill(Color.WHITE);
    button.setLayoutX(10);


    VBox vBox = new VBox(text1, root);


    Pane pane = new Pane(vBox);
    pane.setLayoutX(50);
    pane.setLayoutY(0);
    Scene scene = new Scene(pane, 400, 200, Color.BLACK);

Without button:

display without button

With button:

display with a button

Upvotes: 0

Views: 251

Answers (1)

James_D
James_D

Reputation: 209225

It's not the scene that is changing its background color, but the root of the scene, which is having the styles defined in the default modena.css style sheet applied.

Note that CSS is not applied unless an instance of Control (or one of its subclasses, like Button) is created: the idea here is that styles are mainly defined only for controls, so it's not worth the performance hit for applications that use no controls (purely graphical applications, etc). There is no need to even add the control to the scene graph: as soon as Control's constructor is called, the stylesheet will be applied.

A quick fix is

pane.setStyle("-fx-background-color: transparent ;");

or 

pane.setStyle("-fx-background-color: black ;");

but it's probably better to define an external stylesheet:

.root {
    -fx-background: black ;
}

as you'll likely find there are other styles you want to control (in fact, with a little work, you can move all the font and color definitions to the CSS file giving your code better separation).

Upvotes: 3

Related Questions