私はjavaとjavafxを使って素敵な小さなアプリケーションを作って、最近CSSでスタイルを作成し始めました。別のテーマ(黄色、青色など)を持っていると思っていましたが、これを行うには良い方法がないと分かりました。私が何かを変えたいと思ったら、単に変数の値を変更するだけですが、CSSでは可能だとは思いません。だから私の質問には、アプリケーション内のボタンをクリックするだけでテーマを変更する最善の方法はありますか?私は心配していますか?テーマごとに別のスタイルシートを作成し、スタイルシートを切り替える必要がありますか?何か助けてくれてありがとう。CSSテーマを変更する
答えて
は、私はあなたが必要なものを行うには、2つの方法を知っています。 2.メインコンテナからのルックアンドフィールを変更するクラスを変更します。
第一の方法:変更のcssリンク
あなたが唯一の色のみに変更される2つのCSSファイルを作成する必要があります。
ライブ例:http://seantheme.com/color-admin-v1.9/admin/html/index_v2.html
カラーテーマコントローラを表示するには、設定アイコン(COG)をクリックします。
第二の方法:あなたがメインのコンテナに追加されます一つのクラス.red
または.red-theme
を使用する必要があり、あなたがウェブサイトのための3色のテーマを持っているとしましょうメインの容器に
をクラスを追加します。その下のすべてのセレクタの色が変わります。
EX:私は明確な答えのために生きてテストを行ったが、私はそれがステータスだに応じて変化します情報とボックスのコンテキスト状態を使用しますので、私たちは.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は次のようになります。
/* 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">
...
</article>
その後、我々は我々のカラーテーマを設定し
<article class="post-wrapper info">
...
</article>
<article class="post-wrapper success">
...
</article>
<article class="post-wrapper warning">
...
</article>
ライブ元十分な:私は見つかっていないので、
が、私は2番目のオプションを好きで、より多くのそれを使用する必要があり: http://getbootstrap.com/css/#helper-classes-colors
結論:私はここにコンテキストの色を示し、ブートストラップの例を残してhttps://jsfiddle.net/xwazzo/Ls9f313g/2/
さまざまな色の複数のCSSファイルを簡単かつ迅速に作成し、ウェブサイトの重量をあまり大きくしない方法です。
あなたのスタイルシートに含まれるクラスの数が少なくて済み、KBが少なくて済みますので、第1の方法が最適です。
CSSスタイルシートについては、それらを置き換えることができますか? CSSファイルを置き換えるだけで、別々のテーマを使用できますか?とにかく
、私はから想定するとあなたは、実行時にコンポーネントのスタイルを変更したい場合:
は、それは私が恐れているように、は、私は別のスタイルシートを作成しなければならないのですテーマごとに、スタイルシート間を切り替えますか?
実行時にすべてのコンポーネントのスタイルを変更できます。 JavaFX
のすべてのオブジェクトは、Node
から続きます。これは次にStyleable
を実装します。これはあなたに複数のスタイリングオプションを与えます。
スタイルシート全体を変更したい場合は、シーンのスタイルシートを追加したり削除したりすることもできます。カラーテーマblue.css
にデフォルトのテーマdefault.css
から
1.-変更CSSのリンク:
JavaFX-CSSの正しいアプローチは、カラー変数(および派生/ラダー関数)を使用することです。デフォルトのカラー変数を
- のstyle.css:だからあなたが最も可能性の高い3 CSS-ファイルを持っていますblue.css - あなたの青色変数
であなたのstyle.cssには、次のようになります。
.button {
-fx-background-color: my-button-background-color;
}
そして、あなたのテーマ-default.cssは、次のようになり
.root {
my-button-background-color: #f00;
}
そして、あなたのテーマblue.cssは、次のようになります。あなたがテーマ-default.cssを削除するには、シンプルいただきたいテーマを反転したい場合
.root {
my-button-background-color: #00f;
}
Sceneから「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");
}
});
- 1. Wordpressのテーマの変更CSS
- 2. 実行時にCSSファイル(テーマ)を変更する(ASP.NET)
- 3. BuddyBossテーマのリンクのCSSを変更する方法
- 4. 実行時にGWTのCSSテーマを変更するには?
- 5. jqgrid。テーマを変更する
- 6. ggplot変更テーマ変更geom_area、
- 7. Joomla virtuemartテーマ変更
- 8. アトム:マークダウン変更テーマ
- 9. 古いテーマを新しいテーマに変更する際のエラー
- 10. ウェブページのテーマの色を変更する
- 11. CPTXYGraphのテーマを変更するには
- 12. 実行時のテーマを変更する
- 13. ジュピターノートのテーマを変更するには?
- 14. RStudio Editorのテーマを変更する
- 15. プログラムのテーマを変更するには
- 16. 実行時にテーマを変更する
- 17. PreferenceFragmentスタイル/テーマを変更するには?
- 18. Avada WordPressテーマを変更する
- 19. C#:Windowsテーマを変更する
- 20. ネイティブベースでテーマを変更するには?
- 21. Magento2のテーマを変更する方法
- 22. tumblrテーマのリンクデザインを変更する
- 23. ファブリックデジット画面のテーマを変更する
- 24. WPFリボンを変更するテーマ
- 25. Grails 3.x.xのテーマを変更する
- 26. ipython(juypter)ノートブックのテーマを変更するためのCSS要素の検索
- 27. magento変更トップリンクhellowiredテーマ
- 28. AlloyUI Ace-Editorテーマ変更
- 29. 変更ツールバーのテーマは、プログラム
- 30. WPエミュレータのテーマ変更