If you want to adjust the text fill on the cells individually, try setting it directly on the cell itself rather than on the row:
.tree-table-row-cell:selected{
-fx-background-color: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
}
.tree-table-row-cell:selected .tree-table-cell,
.tree-table-cell:selected {
-fx-text-fill: white;
}
Additionally, don't forget about:
.tree-table-row-cell:selected .tree-disclosure-node .arrow {
-fx-background-color: white ;
}
For a different approach:
The modena stylesheet usually sets the text fill based on a color lookup called -fx-text-background-color
. This is determined by another color lookup called -fx-background
, which defines the background color of rows and cells.
The "ladder" function used evaluates to different text colors depending on the intensity of the background color. If the background intensity is below 45%, white text is used, between 46% and 59% black text is used, and above that, grey text is used.
Changing the value of -fx-background
instead of -fx-background-color
typically adjusts the text fill accordingly:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
}
In your case, the chosen background color isn't dark enough to trigger the light text color. With a darker background like #d1531f
, the white text will display as expected without further changes.
To customize the intensity thresholds for the text color evaluation, you can modify the ladder function itself:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-background-color: ladder(
-fx-background,
-fx-light-text-color 60%,
-fx-dark-text-color 61%,
-fx-dark-text-color 69%,
-fx-mid-text-color 70%
);
}
Alternatively, bypass the ladder entirely and set -fx-text-background-color
directly to the light text color:
.tree-table-row-cell:selected{
-fx-background: #f1734f;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-table-cell-border-color: white;
-fx-text-background-color: -fx-light-text-color;
}
This method aligns with default CSS practices, allowing inherited looked-up colors to maintain consistency across the cells and automatically applying the same color to the disclosure arrow as well.