使用 JavaFx 创建暗模式
Make a dark mode with JavaFx
我想知道是否有一种使用 JavaFx 和 CSS 制作暗模式的简单方法。我有一个带有名为 'Dark mode' 的 CheckMenuItem 的 MenuBar,当我单击它时,我希望场景变暗,文本变白。
我已经有一段时间没玩过 "theming" JavaFX 应用程序了,但不久前我有一个 CSS 文件:
.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
,你可以这样做
checkMenuItem.selectedProperty().addListener((obs, wasSelected, isSelected) -> {
if (isSelected) {
scene.getStyleSheets().add("dark-theme.css");
} else {
scene.getStyleSheets().remove("dark-theme.css");
}
});
属性 基础可以应用于每个 JavaFX 类型,这使得可以使用 JavaFx 节点或布局的单一基础颜色来指定颜色主题......,并具有不同的颜色(对于它 children) 基于该基色计算!
在这种情况下,您正在尝试为整个场景设置主题,因此您应该将基色应用于层次结构中最高的组件,您可以通过获取场景的根节点来获得它!
checkMenuItem.selectedProperty().addListener((obs, wasSelected, isSelected) -> {
if (isSelected) {
scene.getRoot().setStyle("-fx-base:black");
} else {
scene.getRoot().setStyle("");
}
});
这是我的。
(更新)上一个太不透明了
.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;
}
我是 javafx 的新手,但我很确定创建 2 个样式表 并在它们之间切换就足够了。
如果我说的不对,抱歉,我是 javafx 的新手
我想知道是否有一种使用 JavaFx 和 CSS 制作暗模式的简单方法。我有一个带有名为 'Dark mode' 的 CheckMenuItem 的 MenuBar,当我单击它时,我希望场景变暗,文本变白。
我已经有一段时间没玩过 "theming" JavaFX 应用程序了,但不久前我有一个 CSS 文件:
.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
,你可以这样做
checkMenuItem.selectedProperty().addListener((obs, wasSelected, isSelected) -> {
if (isSelected) {
scene.getStyleSheets().add("dark-theme.css");
} else {
scene.getStyleSheets().remove("dark-theme.css");
}
});
属性 基础可以应用于每个 JavaFX 类型,这使得可以使用 JavaFx 节点或布局的单一基础颜色来指定颜色主题......,并具有不同的颜色(对于它 children) 基于该基色计算!
在这种情况下,您正在尝试为整个场景设置主题,因此您应该将基色应用于层次结构中最高的组件,您可以通过获取场景的根节点来获得它!
checkMenuItem.selectedProperty().addListener((obs, wasSelected, isSelected) -> {
if (isSelected) {
scene.getRoot().setStyle("-fx-base:black");
} else {
scene.getRoot().setStyle("");
}
});
这是我的。
(更新)上一个太不透明了
.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;
}
我是 javafx 的新手,但我很确定创建 2 个样式表 并在它们之间切换就足够了。
如果我说的不对,抱歉,我是 javafx 的新手