java - 更改 CSS 主题

Question

我已经使用 java 和 javafx 制作了一个不错的小应用程序，并且最近开始使用 CSS 来设计它的样式。我想到了拥有不同主题(一个黄色、一个蓝色等)的想法，但后来意识到我不知道这样做的好方法。在 Java 中，如果我想改变一些东西，我会简单地改变一个变量的值，但在 CSS 中，我认为这是不可能的。所以对于我的问题，通过单击按钮(在应用程序内部)更改主题的最佳方法是什么？是否如我担心的那样，是否必须为每个主题制作单独的样式表并在样式表之间切换？感谢您的帮助。

Answer 1

JavaFX-CSS 中的正确方法是使用颜色变量(可能还有派生/梯形图函数)。所以你很可能有 3 个 CSS 文件:

• style.css - 包含组件的选择器和对颜色变量的引用
• theme-default.css - 带有默认颜色变量
• theme-blue.css - 带有蓝色变量

您的 style.css 可能如下所示:

.button {
  -fx-background-color: my-button-background-color;
}

你的 theme-default.css 将是

.root {
  my-button-background-color: #f00;
}

你的 theme-blue.css 将是:

.root {
  my-button-background-color: #00f;
}

如果你想翻转主题，你只需从场景中删除 theme-default.css 并在伪代码中添加 theme-blue.css(切换回来你会做相反的事情):

Scene s = ...
s.getStylesheet().addAll( "style.css", "theme-default.css" );

// ...
button.setOnAction( e -> {
   if( s.getStylesheet().contains( "theme-default.css" ) ) {
     s.getStylesheet().remove("theme-default.css");
     s.getStylesheet().add("theme-blue.css");
   } else {
     s.getStylesheet().remove("theme-blue.css");
     s.getStylesheet().add("theme-default.css");
   }
} );