javafxjavafx-11

Howto get the correct CSS item for DatePicker (JavaFX11)

how do I change the CSS of month label and year label? they are grayish and I want to change to white. I cant find the CSS for these two items.

enter image description here

Current CSS code of this datepicker:

/**
* https://gist.github.com/maxd/63691840fc372f22f470
*/
.calendar-grid {
    -fx-background-color: rgb(20, 156, 255);
}

.combo-box-popup > .list-view > .placeholder > .label {
    -fx-text-fill: white;
}

.calendar-header {
    -fx-background-color: #1d1d1d;
    -fx-base: #1d1d1d;
    -fx-text-fill: white;
}


.date-picker-popup {
    -fx-text-fill: white;
    -fx-background-color:
        linear-gradient(to bottom,
        derive(-fx-color,-17%),
        derive(-fx-color,-30%)
        ),
        -fx-control-inner-background;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 0;
    -fx-alignment: CENTER; /* VBox */
    -fx-spacing: 0; /* VBox */
    -fx-padding: 0.083333em; /* 1 1 1 1 */
    -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}

.date-picker > .text-field {
    -fx-text-fill: white;
}

.date-picker-popup > .month-year-pane {
    -fx-background-color: #1d1d1d;
    -fx-text-fill: white;
}
Solution

  • Change the style for the .month-year-pane to

    
.date-picker-popup > .month-year-pane {
    -fx-base: #1d1d1d ;
    -fx-mark-highlight-color: -fx-light-text-color ;
}

    By default, -fx-background-color is set to fx-background, which in turn depends on -fx-base. The default text fill for controls whose text is rendered over a background of -fx-background is automatically chosen depending on the intensity of the background; in this case it will be set to -fx-light-text-color (which defaults to white).

    The arrows are rendered in -fx-mark-highlight-color, so setting this to -fx-light-text-color ensures the arrows are the same color as the text. (Probably better is to mimic the ladder for -fx-text-fill.)

    A lot of your CSS seems to have no effect. With the changes above, this seems equivalent:

    .calendar-grid {
    -fx-background-color: rgb(20, 156, 255);
}


.date-picker > .text-field {
    -fx-text-fill: white;
}

.date-picker-popup > .month-year-pane {
    -fx-base: #1d1d1d ;
    -fx-mark-highlight-color: -fx-light-text-color ;
}

    Note that the rule

    .date-picker > .text-field {
    -fx-text-fill: white;
}

    makes the text in the text field (i.e. the selected date) invisible; I don't know if this is the desired effect.