更改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");
   }
} );

Answer 2

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

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

是否如我所担心的那样，是否必须为每个主题制作一个单独的样式表并在样式表之间切换？

您可以在运行时重新设置每个组件的样式。 JavaFX每个对象都从Node扩展。 进而实现Styleable 。 这为您提供了多种样式选择。

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

Answer 3

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

1.-将CSS链接从默认主题default.css更改为颜色主题blue.css 。 2.-更改一个可修改主容器外观的类。

第一种方式：更改CSS链接

您只需创建两个仅会改变颜色的css文件。

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

单击设置图标（齿轮）以查看“颜色”主题控制器。

第二种方式：将类添加到主容器

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

例：我进行了现场测试以获得更清晰的答案，但我将为包装盒使用上下文状态，信息会根据其状态而变化，因此我们将具有.warning ， .info和.success状态以及常规主题，该类是.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/

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

结论：

我喜欢第二个选项，并使用了更多选项，因为我还没有找到一种以简单快捷的方式创建具有不同颜色的多个CSS文件的方法，并且网站的重量不会增加太多。

我想第一种方法是最好的，因为样式表上的类较少，并且可以节省几KB。