使用JavaFx设置暗模式 [英] Make a dark mode with JavaFx

问题描述

我想知道是否有一种简单的方法可以使用JavaFx和CSS进行暗模式设置.我有一个带有CheckMenuItem的MenuBar，称为暗模式"，当我单击它时，我希望场景变暗，文本变白.

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.

推荐答案

自从我开始主题化" JavaFX应用程序以来已经有一段时间了，但是不久前我有了一个CSS文件:

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

如果将其放在文件中，例如dark-theme.css，则可以

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

这篇关于使用JavaFx设置暗模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！