How to change JavaFX text color with CSS?

591 views Asked by At

I write a JavaFX application and I'd like to skin it with css.

I've successfully added a style sheet to my application like this:

//Java code
FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml"));
        Scene scene = new Scene(loader.load());
        
        scene.getStylesheets().add(getClass().getResource("/path/to/css").toExternalForm());

I need to change text color, but there is no style class for text object by default.

I created FXML files with SceneBuilder. To assign a text object to a class, I typed the class name to the proper text field (Sidebar >> JavaFX CSS >> Style Class).

enter image description here

CSS file:

.myText {
    -fx-text-fill: #ffffff;
}

However if I run my app, this method does change nothing. How can I solve this problem?

2

There are 2 answers

1
Belushi On

Finally I figured out what caused the problem. I had to add stylesheet to FXML in SceneBuilder.

After that, everything worked correctly.


By the way, I don't know why I had to add stylesheet in SB, despite the fact that I added it in my code earlier. Maybe is it a bug? Or am I just silly?

0
MMR On

for example here :

<Button fx:id="stop" layoutX="100.0"
     layoutY="14.0" mnemonicParsing="false"
     onAction="#onActionStopBtn"
     style=" -fx-background-color:
                    #000000, 
                    linear-gradient(#7ebcea, #2f4b8f),
                    linear-gradient(#426ab7, #263e75),
                    linear-gradient(#395cab, #223768);
             -fx-background-insets: 0,1,2,3;
             -fx-background-radius: 3,2,2,2; 
             -fx-padding: 12 30 12 30;
             -fx-text-fill: white;
             -fx-font-size: 12px;"
     text="Stop" />

add some style to FXML Button
see this for more detail