CODEWITHSUNDEEP
cssjavafx
Varest
Varest

Reputation: 57

Change font color in JavaFX via .css file

Can someone please tell me why -fx-text-fill in the below example doesn't work to change the font color? -fx-stroke is something I've tried as well. Thanks!

Java File:

package SimpleTextFromCSS;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.stage.Stage;

public class Main extends Application
{
    @Override
    public void start(Stage primaryStage)
    {
        GridPane rootGP = new GridPane();
        Label centerText = new Label("Sample text.");
        rootGP.getChildren().add(centerText);
        Scene scene = new Scene(rootGP,1200,800);
        scene.getStylesheets().add(getClass().getResource("style.css").toExternalForm());

        primaryStage.setScene(mainScene);
        primaryStage.show();
        }
    }
    public static void main(String[] args)
    {
        launch(args);
    }
}

CSS:

.root{
  -fx-font-family: "Broadway";
  -fx-font-size: 50pt;
  -fx-text-fill: blue;
}

Upvotes: 2

Views: 4893

Answers (2)

dot_cr2
dot_cr2

Reputation: 127

Text {
   -fx-fill: blue;
}

Can be used to change all Text components in a layout.

.root-pane .wrapper Text {
    -fx-fill: blue;
}

Also works if you want to specify more specific components like usual css.

Upvotes: 0

James_D
James_D

Reputation: 209339

As pointed out in the comments (thanks to @Slaw), the -fx-text-fill property is not inherited by default, so setting it for your root pane will not allow it to propagate down to the labels in your UI. A possible fix would be to define the property for, say .label, but a better approach is to hook into the "theming" functionality of the default style sheet ("modena"). Admittedly, the documentation on this is pretty thin, but reading the comments in the CSS source code, particularly at the top of the file, indicate how this is intended to work.

Modena defines a "looked-up color" called -fx-text-background-color, which is used for text painted on top of a background filled with -fx-background-color. A Label is such a text, and the default style sheet sets the text fill of a label to -fx-text-background-color.

So one approach is to redefine the -fx-text-background-color value:

.root{
  -fx-font-family: "Broadway";
  -fx-font-size: 50pt;
  -fx-text-background-color: blue;
}

If you want to be a little more sophisticated, the default value of -fx-text-background-color is actually a "ladder", which picks a color depending on the intensity of the background. It is itself defined in terms of three other colors:

  • -fx-light-text-color (for dark backgrounds, which defaults to white),
  • -fx-mid-text-color (for light backgrounds, which defaults to a light grey), and
  • -fx-dark-text-color (for medium backgrounds, which defaults to black).

So if you want a solution that would be visually robust to changes in the background of a label, you could do

.root{
  -fx-font-family: "Broadway";
  -fx-font-size: 50pt;

  -fx-dark-text-color: navy ;
  -fx-mid-text-color: blue ;
  -fx-light-text-color: skyblue ;
}

Upvotes: 6

Related Questions