Make a dark mode with JavaFx

℡╲_俬逩灬. 提交于 2020-02-27 09:12:20

问题


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.


回答1:


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




回答2:


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



回答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 it's 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("");
    }
});


来源:https://stackoverflow.com/questions/49159286/make-a-dark-mode-with-javafx

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!