CODEWITHSUNDEEP
javafxscenebuilder
Sander B
Sander B

Reputation: 337

Make a dark mode with JavaFx

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.

Upvotes: 10

Views: 22047

Answers (4)

Fire Code
Fire Code

Reputation: 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

Upvotes: -1

SDIDSA
SDIDSA

Reputation: 1004

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("");
    }
});

Upvotes: 4

Wesos de Queso
Wesos de Queso

Reputation: 1572

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

Upvotes: 19

James_D
James_D

Reputation: 209330

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

Upvotes: 14

Related Questions