21

Is there any way to see the applied CSS-Rules for JavaFX-Elements? Or there is a published reference with the default CSS-Rules available?

I would like, for example , to know the color of Toolbar's border.

bruno
  • 2,213
  • 1
  • 19
  • 31
Gundon
  • 2,081
  • 6
  • 28
  • 46
  • 1
    Re-thinking your question, I missed a rather obvious answer before: You can use the new Scenic View (http://fxexperience.com/scenic-view/) application to review the properties of a node at runtime. I have so far only worked with an earlier beta, so I am not sure if it will display all CSS properties correctly, but it is intended to be the correct tool for the job. – sarcan Aug 12 '12 at 15:22
  • Related with [JavaFX 2 debug css](http://stackoverflow.com/q/10734193/682495) – Uluk Biy Aug 13 '12 at 08:41
  • All the answers to this old question are outdated. Please see my answer below : [stackoverflow.com/a/74214984/10686802](https://stackoverflow.com/a/74214984/10686802) You can also find the default CSS (Modena) in the official repo in the skin directory where all the themes are located: [github.com/openjdk/jfx/tree/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin](https://github.com/openjdk/jfx/tree/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin) (The structure might change in the future). – Remzi Cavdar Nov 15 '22 at 15:35

6 Answers6

23

The CSS file is located in javafxrt.jar at jfxrt.jar!/com/sun/javafx/scene/control/skin/caspian/caspian.css .

Unfortunately, there is no API access to the CSS styles of an element as of now, though that is apparently being discussed for JavaFX 2.2.

sarcan
  • 3,145
  • 19
  • 22
  • Thank you very much. I will accept your answer as soon as I can – Gundon Aug 12 '12 at 14:23
  • 3
    The doc has moved to http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html – akauppi Dec 20 '12 at 09:53
  • 1
    And now, with JavaFX 8, the CSS reference has moved again: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html – randers Feb 10 '16 at 08:35
  • @Gundon Here is the most recent version: https://gist.github.com/Remzi1993/23350e22a51d325ed00171c117fb66d4 – Remzi Cavdar Oct 26 '22 at 22:43
  • @akauppi The docs have moved again: https://openjfx.io/javadoc/19/javafx.graphics/javafx/scene/doc-files/cssref.html since https://openjfx.io has taken over the project development. – Remzi Cavdar Oct 26 '22 at 22:45
  • As of this writing JavaFX 19 is the most recent version. – Remzi Cavdar Oct 26 '22 at 22:45
  • You can find it in the official repo in the skin directory where all the themes are located: https://github.com/openjdk/jfx/tree/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin (The structure might change in the future). But my answer below is more detailed: https://stackoverflow.com/a/74214984/10686802 – Remzi Cavdar Oct 31 '22 at 02:32
15

Here is the extracted caspian.css on pastebin - http://pastebin.com/0PebD9nR

beardedlinuxgeek
  • 1,652
  • 16
  • 26
15

Modena theme

With JavaFX 8 the default CSS is a new theme called Modena. See announcement with screenshots.

See the latest versions on the OpenJFX site at GitHub.

The modena.css for the build version Java8_91 can be found here:

https://gist.github.com/maxd/63691840fc372f22f470

If you search the css file in different JDK versions this is the way to go.

JDK below 10.0: $JAVA_HOME/jre/lib/ext/jfxrt.jar --> com/sun/javafx/scene/control/skin/modena.

JDK for 10.0 and higher: $JAVA_HOME/jmods/javafx.controls.jmod --> classes/com/sun/javafx/scene/control/skin/modena.

Basil Bourque
  • 303,325
  • 100
  • 852
  • 1,154
NDY
  • 3,527
  • 4
  • 48
  • 63
  • Thanks. I had to use `jmod extract` on `javafx.controls.jmod` in order to see the files. – Eric Duminil Nov 24 '21 at 09:36
  • You can find it in the official repo in the skin directory where all the themes are located: https://github.com/openjdk/jfx/tree/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin (The structure might change in the future). But my answer below is more detailed: https://stackoverflow.com/a/74214984/10686802 – Remzi Cavdar Oct 31 '22 at 02:31
4

From Skinning JavaFX Applications with CSS: Default Style Sheet,

The default style sheet for JavaFX applications is caspian.css, which is found in the JavaFX runtime JAR file, jfxrt.jar

and

Use the following command to extract the style sheet from the JAR file:

jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

and then just use a css viewer.

mre
  • 43,520
  • 33
  • 120
  • 170
3

As for the end of 2019 the default modena.css can be looked at official jfx github repo:

https://github.com/openjdk/jfx/tree/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena

Or you can look inside Maven javafx-controls. For example in javafx-controls-13-win.jar go to /com/sun/javafx/scene/control/skin/modena/

BeshEater
  • 143
  • 2
  • 7
  • 1
    Nice answer with modern info. Most of the other existing answers, even the highly voted ones, include outdated info which is now misleading for modern JavaFX implementations. – jewelsea Dec 26 '19 at 21:54
  • 1
    @jewelsea Indeed! I have also posted my answer below. I hope we can help others be giving up-to-date answers. – Remzi Cavdar Oct 26 '22 at 23:25
1

Modena

Modena has become the default skin for JavaFX applications.

Default Maven dir

%HOMEPATH% on Windows is: C:\Users\USERNAME

The default maven directory is %HOMEPATH%\.m2\repository And JavaFX can be found under %HOMEPATH%\.m2\repository\org\openjfx

modena.css

Since JavaFX (OpenJFX) became modular the directory and file structure has changed. The most recent JavaFX version (as of this writing 19) has placed the CSS at %HOMEPATH%\.m2\repository\org\openjfx\javafx-controls\19 the CSS file can be found inside the following .jar file: javafx-controls-19-win.jar (platform specific)

I have extracted the whole modena folder and put it on GitHub: https://github.com/Remzi1993/OpenJFX-modena

And for anyone who is only interested in the core modena.css here is a public gist: https://gist.github.com/Remzi1993/23350e22a51d325ed00171c117fb66d4

Official OpenJFX repo

You can also find out by going to their GitHub repo: https://github.com/openjdk/jfx/ and the specific directory: https://github.com/openjdk/jfx/tree/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin (The structure might change in the future). They seem to have officially moved to GitHub (finally) and the most recent documentation is also moved to their website at https://openjfx.io

OpenJFX Docs (install guides)

JavaFX CSS Reference Guide

Remzi Cavdar
  • 135
  • 1
  • 13