I was wondering if there is an easy way to make a dark mode using JavaFx and CSS. I have a MenuBar with a CheckMenuItem called 'Dark mode' and when I click it I want the scene to become dark and the text to become white.
Here's mine.
(Update) The previous one was too opaque.
.root {
-fx-accent: #1e74c6;
-fx-focus-color: -fx-accent;
-fx-base: #373e43;
-fx-control-inner-background: derive(-fx-base, 35%);
-fx-control-inner-background-alt: -fx-control-inner-background ;
}
.label{
-fx-text-fill: lightgray;
}
.text-field {
-fx-prompt-text-fill: gray;
}
.titulo{
-fx-font-weight: bold;
-fx-font-size: 18px;
}
.button{
-fx-focus-traversable: false;
}
.button:hover{
-fx-text-fill: white;
}
.separator *.line {
-fx-background-color: #3C3C3C;
-fx-border-style: solid;
-fx-border-width: 1px;
}
.scroll-bar{
-fx-background-color: derive(-fx-base,45%)
}
.button:default {
-fx-base: -fx-accent ;
}
.table-view{
/*-fx-background-color: derive(-fx-base, 10%);*/
-fx-selection-bar-non-focused: derive(-fx-base, 50%);
}
.table-view .column-header .label{
-fx-alignment: CENTER_LEFT;
-fx-font-weight: none;
}
.list-cell:even,
.list-cell:odd,
.table-row-cell:even,
.table-row-cell:odd{
-fx-control-inner-background: derive(-fx-base, 15%);
}
.list-cell:empty,
.table-row-cell:empty {
-fx-background-color: transparent;
}
.list-cell,
.table-row-cell{
-fx-border-color: transparent;
-fx-table-cell-border-color:transparent;
}
It's been a while since I played with "theming" a JavaFX application, but from a while ago I have a CSS file:
.root {
-fx-base: #3f474f;
-fx-accent: #e7eff7 ;
-fx-default-button: #7f878f ;
-fx-focus-color: #efefef;
-fx-faint-focus-color: #efefef22;
-fx-focused-text-base-color : ladder(
-fx-selection-bar,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
-fx-focused-mark-color : -fx-focused-text-base-color ;
}
.text-input:focused {
-fx-highlight-text-fill: ladder(
-fx-highlight-fill,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
}
If you put this in a file, say dark-theme.css, you can do
checkMenuItem.selectedProperty().addListener((obs, wasSelected, isSelected) -> {
if (isSelected) {
scene.getStyleSheets().add("dark-theme.css");
} else {
scene.getStyleSheets().remove("dark-theme.css");
}
});
the property base can be applied to every JavaFX type, This enables a color theme to be specified using a single base color for a JavaFx Node or Layout..., and to have variant colors (for its children) computed based on that base color!
in this case, you are trying to set the theme for the whole scene so you should apply the base color to the highest Component in the hierarchy which you can get by getting the root Node of your scene!
checkMenuItem.selectedProperty().addListener((obs, wasSelected, isSelected) -> {
if (isSelected) {
scene.getRoot().setStyle("-fx-base:black");
} else {
scene.getRoot().setStyle("");
}
});
I'm new to javafx and all, but I'm pretty sure creating 2 stylesheets and switching between them would suffice.
Again if what I said was wrong, sorry, I'm new to javafx
Related
I'am using CSS file with JavaFX (scene builder),I ran into a problem that I couldn't find a solution for.
I searched a lot and couldn't find a solution to this problem
.linear-grad {
-fx-background-color: linear-gradient(to bottom left,#5f0a87,#a4508b);
}
.button1 {
-fx-background-color :#5F0E81;
-fx-text-fill:#ffffff;
}
.button1:hover{
-fx-text-fill:#6E1988;
}
.button1 :pressed {
-fx-text-fill:#CEB2D7;
}
.button1 :active {
-fx-text-fill:#B184BF;
}
.button2 {
-fx-background-color :#863684;
-fx-text-fill : #ffffff;
}
.button2:hover{
-fx-text-fill:#994984;
}
.button2:pressed {
-fx-text-fill:#BB85AD;
}
.button2:active {
-fx-text-fill:#BB85AD;
}
Error Massage :
Dec 31, 2021 5:42:23 PM javafx.css.CssParser term
WARNING: CSS Error parsing '*{-fx-background-color: linear-gradient : (to bottom left,#5f0a87, #a4508b);}: Unexpected token ':' at [1,40]
Is there anyone who can help me solve this problem?
try this
.linear-grad {
-fx-background-color: linear-gradient(to bottom left, #5f0a87, #a4508b);
}
.button1 {
-fx-background-color: #5F0E81;
-fx-text-fill : #ffffff;
}
.button1:hover {
-fx-text-fill: #6E1988;
}
.button1:pressed {
-fx-text-fill: #CEB2D7;
}
.button1:active {
-fx-text-fill: #B184BF;
}
.button2 {
-fx-background-color: #863684;
-fx-text-fill : #ffffff;
}
.button2:hover {
-fx-text-fill: #994984;
}
.button2:pressed {
-fx-text-fill: #BB85AD;
}
.button2:active {
-fx-text-fill: #BB85AD;
}
I am currently facing a problem with javafx table. I have a tableview that shows a list of subjects. The background color of each row depends if a subject is able to be enrolled or not. Subjects with green background can be enrolled and subjects with pink background cannot be enrolled. The problem occurs when scrolling the table.
TableView before scrolling
TableView after scrolling down and up
After scrolling, the background color of rows have changed and the subjects with green background might become pink and vice versa. This works perfectly without adding a css to the table.
Code I used to set the background color of rows
tblAvailableSubjects.setRowFactory((TableView<Subject> param) -> {
TableRow<Subject> row = new TableRow<>();
row.emptyProperty().addListener((obs, wasEmpty, isEmpty) -> {
if(isEmpty) {
row.setContextMenu(null);
row.setStyle("-fx-border-color: transparent");
} else {
Subject subject = row.getItem();
if(subject.getSubjectEvaluation().equals(SubjectEvaluation.COMPLETED)) {
row.setStyle("-fx-background: #B2EBF2");
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.FAILED)) {
row.setStyle("-fx-background: #FF0000");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.OKAY)) {
row.setStyle("-fx-background: #8BC34A");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.ENROLLWITHCOREQ)) {
row.setStyle("-fx-background: #FFEB3B");
row.setContextMenu(tblAvailableContext);
} else if(subject.getSubjectEvaluation().equals(SubjectEvaluation.CANTENROLL)) {
row.setStyle("-fx-background: #FFCDD2");
}
}
});
return row;
});
CSS for table
.table-view {
/* Constants used throughout the tableview. */
-fx-table-header-border-color: transparent;
-fx-table-cell-border-color: -fx-box-border;
/* Horizontal Lines*/
-fx-background-color: transparent;
}
.table-view .filler, .table-view .column-header
{
-fx-size: 40;
-fx-border-style: null;
-fx-border-color: rgb(200.0, 200.0, 200.0);
-fx-border-width: 0 0 1 0;
-fx-background-color: transparent;
}
.table-view .show-hide-columns-button
{
-fx-background-color: transparent;
}
.table-view .column-header .label,
.table-view .column-drag-header .label
{
-fx-alignment: CENTER_LEFT;
}
.table-view .column-header-background
{
-fx-background-color: transparent;
}
.table-row-cell {
-fx-cell-size: 30px;
}
.table-cell {
-fx-border-color: transparent;
-fx-border-width: 1;
}
EDIT: The subject's SubjectEvaluation value doesn't change, it seems that it switches the context menu and background color between rows when scrolling.
I hope someone could help me with this. Thanks.
I would like to update my TableView rows color depending on the data in the cell, so I used a pseeudoClass to reference the style in Css. the rows are colored as I wanted but, it lost the selection and the mouse hover effect, now I have a colored rows without any indication to the selected row. here is my code:
PseudoClass myPseudoClass = PseudoClass.getPseudoClass("dtta_dep");
PseudoClass myPseudoClass1 = PseudoClass.getPseudoClass("dtta_dest");
fplTableView.setRowFactory(tv -> new TableRow<FlightPlan>() {
#Override
public void updateItem(FlightPlan item, boolean empty) {
super.updateItem(item, empty);
this.setFocused(true);
this.setHover(true);
System.out.println("myPseudoClass = "+myPseudoClass.getPseudoClassName());
pseudoClassStateChanged(myPseudoClass, (! empty) && item.Dep_aerodomProperty().get().equalsIgnoreCase("DTTA"));
pseudoClassStateChanged(myPseudoClass1, (! empty) && item.Dest_aerodomProperty().get().equalsIgnoreCase("DTTA"));
}
});
getData();
for (int i = 0; i < listF.size(); i++) {
System.out.println(listF.get(i).Dep_aerodomProperty().get());
}
selectWithService();
});
the css file :
.table-row-cell {
-fx-background-color: linear-gradient(white 0%, white 90%, #e0e0e0 90%);
}
.table-row-cell:selected {
-fx-background-color: linear-gradient(#95caff 0%, #77acff 90%, #e0e0e0 90%);
}
.table-row-cell:dtta_dep .table-cell {
-fx-text-fill: red;
-fx-background-color:beige;
}
.table-row-cell:dtta_dest .table-cell {
-fx-text-fill: blue;
-fx-background-color:greenyellow;
}
Use -fx-background instead of -fx-background-color on the table-row-cell to set the non-selected background. You can use -fx-selection-bar to set the selected color. The text fill is defined in a table cell with the -fx-text-background-color color, (i.e. the text fill for text over a -fx-background), so you can override those for the text fill in the cells.
.table-row-cell {
-fx-background: linear-gradient(white 0%, white 90%, #e0e0e0 90%);
-fx-selection-bar: linear-gradient(#95caff 0%, #77acff 90%, #e0e0e0 90%);
}
.table-row-cell:dtta_dep {
-fx-text-background-color: red;
-fx-background: beige;
}
.table-row-cell:dtta_dest {
-fx-text-background-color: blue;
-fx-background:greenyellow;
}
I have problem with styling ComboBox in css. I don't know how to change font color of selected item fx (2 people from black color to red), and how to set color effect when you point mouse on the current choice.
css code:
.combo-box
{
-fx-background-image:url("people_button.jpg");
-fx-text-fill: red;
-fx-min-width: 128;
-fx-min-height: 48;
}
.combo-box-popup .list-view
{
-fx-background-color: -fx-box-border, -fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 8, 0.0 , 0 , 0 );
}
.combo-box-popup .list-view .list-cell
{
-fx-background-color: #ececec;
-fx-text-fill: #9a9a9a;
-fx-font-family: Oxygen Light;
}
and java code:
ComboBox<String> combo = new ComboBox();
combo.setVisibleRowCount(5);
combo.setItems(observableList);
combo.setValue("1 person");
Just add the pseudo-class hover to your style sheet :
.combo-box-popup .list-view .list-cell:hover {
-fx-text-fill: red;
}
For adding a color to the selected item, use the pseudo-class selected :
.combo-box .cell:selected {
-fx-text-fill: red;
}
I have some blocks with different background-colors (which are set in variables) and if a user hovers one of them, the color shall light/fade a bit.
Therefore I use this one:
.block1:hover,.block2:hover{
background-color:lighten($color1,40%);
}
But this just fades one static color - $color1 - to 40%. How would I do that, if .block1 had $color1 and .block2 had $color2 as background colors set? So the result should be
.block1:hover{
background-color:lighten($color1,40%);
}
.block2:hover{
background-color:lighten($color2,40%);
}
What do I need to use therefore?
Use a mixin, like so:
.block1 {
.backgroundsetup($color1);
}
.block2 {
.backgroundsetup($color2);
}
.backgroundsetup($color, $amt: 40%) {
background-color: $color;
&:hover {
background-color: lighten($color, $amt);
}
}
There's no special way to write the CSS you have in your example in SCSS, that would be the way you do it. But if you want to optimize and write less code, then you could take advantage of SASS' hashmaps and the foreach loop to do this for you.
SASS
$color1: #4e9bac;
$color2: #248cff;
$color3: #3b5998;
$blocks: (
block1: $color1,
block2: $color2,
block3: $color3,
);
#each $block, $color in $blocks {
.#{$block} {
background-color: $color;
&:hover {
background-color: lighten($color, 40%);
}
}
}
CSS Output
.block1 {
background-color: #4e9bac;
}
.block1:hover {
background-color: #d8eaee;
}
.block2 {
background-color: #248cff;
}
.block2:hover {
background-color: #f0f7ff;
}
.block3 {
background-color: #3b5998;
}
.block3:hover {
background-color: #bbc8e4;
}