Global CSS definitions

Question

Hy there,
i wonder if there is a possibility to declare some "global" custom styledefinitions.
Not global own style classes, because i know how to do that.
Further i mean to do some -fx-customColor: #666666;
and use that definition on a button:
.button{
-fx-background-color: -fx-customColor;
i know that there is a -fx-color where all colors can be derived but i need to define
more than one custom color ;)
BR
Harry

Answer 1

An interesting thing is that you can override the defined colors in a scope specific way.
For example in caspian.css -fx-base under the .root style class is defined as a -fx-base: #d0d0d0; which gives it a light grey color (which is horrible IMO as the gray color themes look so 90s).
But, you can define a custom stylesheet and under it's .root set -fx-base: antiquewhite and then everything is this nice antique white color rather than a metallic silver color.
Now if you would like all of your buttons in peach and your scroll bars in gold, under the .button style set -fx-base to peachpuff and for .scroll-bar set -fx-base to palegoldenrod.
You can also define a styleclass bigredeasy button with a -fx-base of firebrick and -fx-font-size of 5em and any button you assign that styleclass will have nice big letters on a red background.
This trick also works for inline styles, so if you only want to create one bigredeasy button, instead of using a styleclass, you could button.setStyle("-fx-base: firebrick; -fx-font-size: 5em;") in the code.
The great thing about all this is that when you redefine -fx-base everything else in caspian is derived from it, including all of the gradients, the enable/disable coloring, the hover and pressed state coloring etc. These means you don't lose all of the visual candy (some of which is integral to the UX of the whole UI) from the default css style like you would if you instead did button.setStyle("-fx-background-color: firebrick");
So, for your example, I'd suggest:
.root {
  -fx-custom-color: #666666;
.button {
  -fx-base: -fx-custom-color;
}