Question

我已经构建了一个具有一个主题的应用程序，当我完成该应用程序时，我会使用该CSS文件，尝试让用户选择他喜欢的选择颜色，并且每个XML文件都包含在FXML文件中阶段

 *{
    -fx-primary :#2A2E37 ;
    -fx-secondary : #FFFF8D;
    -fx-primarytext : #B2B2B2;
    -fx-blue: #1976D2;
    -fx-red: #FF0000;
    -fx-green:#2E7D32; 

}
.root{ 
    -fx-background-color: -fx-primary;
}

例如，我想通过某种方法来更改-fx-primary的值，然后从调色板中选择颜色（我可以这样做）对于fxml，我使用简单的方法

<AnchorPane fx:id="rootAnchoreFW" prefHeight="800.0" prefWidth="767.0" stylesheets="@../Style/myTheme.css" >

Answer 1

您可以为此颜色创建多个主题。例如，名为themeRed.css，themeBlue.css

的文件

   .root{
    -fx-font-size: 14pt;
    -fx-font-family: "Tahoma";
    -fx-base: #DFB951;
    -fx-background: #A78732;
    -fx-focus-color: #B6A678;
}

并且，您有一个更改颜色或主题的按钮。

您可以使用以下内容在应用中设置主题：

公共字符串themeRed = getClass（）。getResource（“ themeRed.css”）。toExternalForm（）; public String themeBlue = getClass（）。getResource（“ themeBlue.css”）。toExternalForm（）;

并在按钮单击操作中，或在发生单击时触发的方法中，可以使用：

btn.setOnAction(new EventHandler<ActionEvent>() {
    @Override
    public void handle(ActionEvent event) {
        scene.getStylesheets().remove(themeRed);
        scene.getStylesheets().add(themeBlue);
        System.out.println("Stylesheets: " + scene.getStylesheets());
        //You can see the stylesheet being used
    }
});

您可以使用它来更改主题。

另一种选择是，如果仅更改一条css线（例如，像一个按钮中的背景），则可以在所需的每个元素中使用setStyle方法。

例如：

btn.setStyle("-fx-background: #A78732;");

Answer 2

例如，如果您使用的是ColorPicker colorPicker：

colorPicker.valueProperty().addListener((obs, oldValue, newValue) -> {
            yourAnchorPane.setStyle("-fx-primary : " + newValue);
});

因此，基本上，您需要使用setStyle函数，添加要更改的属性及其值（如CSS中一样）。
否则（如果您不想放置属性），您可以执行以下操作来更改标签的颜色，例如：

label.setTextFill(colorPicker.getValue())

Answer 3

您可以创建“ CSS编辑器”

您将有两个CSS：

myTheme.css ：

@import url("main.css");

*{
    -fx-primary :#2A2E37 ;
    -fx-secondary : #FFFF8D;
    -fx-primarytext : #B2B2B2;
    -fx-blue: #1976D2;
    -fx-red: #FF0000;
    -fx-green:#2E7D32; 
}

main.css ：

.root{ 
    -fx-background-color: -fx-primary;
}

您将为fxml使用相同的代码：

<AnchorPane fx:id="rootAnchoreFW" prefHeight="800.0" prefWidth="767.0"
            stylesheets="@../Style/myTheme.css" >

要编辑CSS，您有两个选择：

读取CSS文件，导出数据，对其进行更新（删除旧的CSS文件并创建一个新文件）
读取配置文件（txt，JSON，XLM ...）以存储您配置的数据并使用它重新创建scc。

这将是我认为的答案的一部分

如何从JavaFX中的Java控制器控制CSS文件

3 个答案: