Question 276691 in CSS Question posted in
Some basic documentation can be found here.

Css – Is the text label of a ColorPicker in Javafx customizable?

Let me be clear that I am not trying to use the output of a ColorPicker with this question. I figured out how to do that. I’m just trying to modify it.

By default, the ColorPicker has a white-ish background with a black-ish text color.

The only thing that isn’t default about this is the fact that I’ve assigned the starting color to be black.

enter image description here

Perusing the javadocs has led me to finding that I can change the borders and the background of the ColorPicker just fine:

Color contrast = color.invert();

colorPicker.setBorder(new Border(new BorderStroke(contrast, BorderStrokeStyle.SOLID, null, null)));
colorPicker.setBackground(new Background(new BackgroundFill(color, null, null)));

That gets you the following:

Moved onto a black background so you can see the white border.

enter image description here

Questions like these (JavaFX ColorPicker customizable via CSS) that have images of people having done this before have led me to believe that this is possible. Perhaps they are dated (I’m using javafx v21). However, despite my best efforts, I haven’t manage to accomplish something similar to this using either built-in methods or css through colorPicker.setStyle(). I’ve tried most of what I can think of aside from making an entire css stylesheet, which I think is overkill (which is my way of implying that I have no idea how to do that, so if you have suggestions for tutorials on how to create css stylesheets, I would appreciate them, since most of the ones I’ve found talk about using css once you’ve set it up instead of how to integrate it into a Java project, which is the part I need a tutorial on because picking up a language is not what I’m confused about with these things).

Tags:

2

Answers


  1. 0

    The style class for the label is color-picker-label. You can set the desired color of the label in the css file as below:

    .color-picker .color-picker-label {
    -fx-text-fill: #FFFFFF;
}

    However, if you are looking to set these colors dynamically, you can create a variable in css for the colors you want. And only update these variables in progrom using setStyle().

    For demonstration purpose, you can check the below demo code, that updates the background and foreground color of the color picker based on the value it has. I hope this can provide you some direction.

    enter image description here

    import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ColorPicker;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class ColorPickerDemo extends Application {
    // YOu can keep the below code in the css file also.
    public static final String CSS = "data:text/css," + // language=CSS
            """
                    .color-picker{
                        -fx-cp-background: #000000;
                        -fx-cp-foreground: #FFFFFF;
                        -fx-background-color: -fx-cp-background;
                        -fx-border-color: -fx-cp-foreground;
                    }
                    
                    .color-picker .color-picker-label {
                        -fx-text-fill: -fx-cp-foreground;
                    }
                    
                    .color-picker .picker-color-rect{
                        -fx-stroke: -fx-cp-foreground;
                    }
                    """;

    @Override
    public void start(Stage primaryStage) throws Exception {
        ColorPicker colorPicker = new ColorPicker(Color.BLACK);
        colorPicker.valueProperty().addListener((obs, old, color) -> {
            String bg = toHexString(color);
            String contrast = toHexString(color.invert());
            colorPicker.setStyle("-fx-cp-background:" + bg + ";-fx-cp-foreground:" + contrast + ";");
        });

        StackPane root = new StackPane(colorPicker);
        Scene scene = new Scene(root, 250, 200);
        scene.getStylesheets().add(CSS);
        primaryStage.setScene(scene);
        primaryStage.setTitle("ColorPicker");
        primaryStage.show();
    }

    // The below code is picked from StackOverflow
    public String toHexString(Color value) {
        return "#" + (format(value.getRed()) + format(value.getGreen()) + format(value.getBlue()) + format(value.getOpacity()))
                .toUpperCase();
    }

    private String format(double val) {
        String in = Integer.toHexString((int) Math.round(val * 255));
        return in.length() == 1 ? "0" + in : in;
    }
}
    Login or Signup to reply.
  2. 0

    Preface:

    Just a summary of my comment above.

    Explanation:

    Why does your way not work? I hope you are familiar with FXML or at least HTML. There are standalone tags (components) like label or div (HTML), but there are also tags like Colorpicker or media (HTML), which are a summary of many other tags.

    A Colorpicker has a Label component inside it (in HTML you would say in its Shadow Dom).

    With setStyle() you can only apply CSS to the root element itself (e.g. Colorpicker), but NOT to their child elements (Label).

    So you have to create a CSS file in which you CAN specify the styling of child elements.

    This .color-picker{...} means "put style on ColorPicker.

    This .color-picker .color-picker-label {...} means "put style on all ColorPickerLabels inside ColorPicker".

    Solution:

    Step 1: Create a CSS FILE as String

    public static final String CSS = "data:text/css," + // language=CSS
            """
                    .color-picker{
                        -fx-cp-background: #000000;
                        -fx-cp-foreground: #FFFFFF;
                        -fx-background-color: -fx-cp-background;
                        -fx-border-color: -fx-cp-foreground;
                    }
                    
                    .color-picker .color-picker-label {
                        -fx-text-fill: -fx-cp-foreground;
                    }
                    
                    .color-picker .picker-color-rect{
                        -fx-stroke: -fx-cp-foreground;
                    }
                    """;

    Step 2: Add the CSS FILE to your Scene

    scene.getStylesheets().add(CSS);

    Note:

    This "data:text/css," must be the first part of your CSS String. Do not forget it!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search