更改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。