javafx - 使用 JavaFx 制作暗模式

Question

我想知道是否有一种简单的方法可以使用 JavaFx 和 CSS 制作暗模式。我有一个带有名为“暗模式”的 CheckMenuItem 的 MenuBar，当我单击它时，我希望场景变暗，文本变白。

Answer 1

这是我的。

(更新)上一个太不透明了。

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