11

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.

Sander B
  • 337
  • 3
  • 4
  • 18

4 Answers4

20

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;
}

enter image description here

Wesos de Queso
  • 1,526
  • 1
  • 21
  • 23
15

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");
    }
});
James_D
  • 201,275
  • 16
  • 291
  • 322
  • 1
    getting ` loadStylesheetUnPrivileged`? see : [... error when trying to use css stylesheet with JavaFX](https://stackoverflow.com/q/33764821/196507) – lepe Aug 20 '18 at 06:18
3

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("");
    }
});
SDIDSA
  • 894
  • 10
  • 19
  • Add some explanation to your answer for better understanding – Pankaj Makwana Mar 08 '18 at 05:54
  • 2
    Although your code snippet might solve the issue, you should describe what’s the purpose of your code (how it solves the problem). Furthermore, you might want to check https://stackoverflow.com/help/how-to-answer – Ahmad F Mar 08 '18 at 09:25
  • 1
    this works perfectly fine, and the explanation is good enough – dermoritz Jun 27 '20 at 20:06
-1

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

Fire Code
  • 1
  • 1