更改 CSS 主题

Question

我使用 java 和 javafx 制作了一个不错的小应用程序，最近开始使用 CSS 对其进行样式设置。我想到了拥有不同主题（一个黄色、一个蓝色等）的想法，但后来意识到我不知道这样做的好方法。在 java 中，如果我想更改某些内容，我只需更改变量的值即可，但在 CSS 中，我认为这是不可能的。所以对于我的问题，通过单击按钮（在应用程序内）更改主题的最佳方法是什么？是不是像我担心的那样，我必须为每个主题制作一个单独的样式 sheet 并在样式 sheet 之间切换？感谢您的帮助。

Answer 1

CSS 样式表的强大功能不是可以互换使用吗？仅通过替换 CSS 文件来使用单独的主题？

无论如何，如果您想在运行时更改组件的样式，正如我假设的那样：

Is it as I have feared, do I have to make a separate style sheet for every theme and switch between style sheets?

您可以在运行时重新设置每个组件的样式。 JavaFX 中的每个对象都扩展自 Node. Which in turn implements Styleable。这为您提供了多种样式选择。

如果您确实想要更改整个样式表，您也可以在场景中添加和删除样式表。

Answer 2

我知道有两种方法可以满足您的需求：

1.- 将 css link 从默认主题 default.css 更改为颜色主题 blue.css。 2.- 更改 class 修改主容器的外观。

第一种方式：改变csslink

您只需创建两个 css 文件，它们只会改变颜色。

实例：http://seantheme.com/color-admin-v1.9/admin/html/index_v2.html

单击设置图标 (cog) 查看颜色主题控制器。

方式二：在主容器中添加一个class

假设您的网站有 3 个颜色主题，您使用了一个 class .red 或 .red-theme 将添加到主容器中，因为它会更改每个选择器下面的颜色。

EX: 我进行了现场测试以获得更清晰的答案，但我将使用上下文状态来表示一个框，其中的信息会根据其状态而改变，所以我们将有 .warning、.info 和 .success 状态和常规主题，其中 class 是 .post-wrapper。

/* General Classes
* First we will give theme bases that include padding, margin, font-size 
* or default colors, etc.
*/
.post-wrapper{ /* Regular theme */
  padding: 15px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 2px rgba(0,0,0, 0.2);
  border-radius: 5px;
}

我们的 HTML 看起来像：

<article class="post-wrapper">
  ...
</article>

然后我们设置颜色主题：

/* CSS THEMES 
* Here we will set every color that will change with our current state.
* It could change colors, widths, font-sizes, :hover, or anything that we need
* to be changed.
*/
.warning{
  color: #9A2C2C;
  background-color: #FFE2E2;
  border-color: #9A2C2C;
}

.info{
  color: #2D5E7D;
  background-color: #CEEAF1;
  border-color: #2D5E7D; 
}

.success{
  color: #2D7D36;
  background-color: #CEF1D2;
  border-color: #2D7D36;
}

而我们的HTML会根据状态变化：

<article class="post-wrapper info">
  ...
</article>

<article class="post-wrapper success">
  ...
</article>

<article class="post-wrapper warning">
  ...
</article>

实例： https://jsfiddle.net/xwazzo/Ls9f313g/2/

我将在此处留下一个显示上下文颜色的 bootstrap 示例： http://getbootstrap.com/css/#helper-classes-colors

结论：

我喜欢第二个选项并且使用得更多，因为我还没有找到一种方法来轻松快速地创建多个 css 具有不同颜色的文件，并且网站权重不会增加太多.

我想第一种方法是最好的，因为你的样式 classes 会更少 sheet 并且会节省几 KB。

Answer 3

JavaFX 中的正确方法-CSS 是使用颜色变量（可能还有 derive/ladder 函数）。所以你很可能有 3 CSS-Files:

style.css - 使用组件的选择器和对颜色变量的引用
theme-default.css - 使用默认颜色变量
主题-blue.css - 用你的蓝色变量

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

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

你的主题-default.css会是

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

而您的主题 -blue.css 将是：

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

如果你想翻转主题，你只需从场景中删除主题-default.css并在伪代码中添加主题-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");
   }
} );

更改 CSS 主题

Changing CSS Themes

css

java

themes

javafx