Search code examples
javacssjavafxrootstyleable

javafx - override root css attributes

I know it is possible to override dynamically css attributes defined for a node using StyleableObjectProperty. I'm asking now how can i change root properties declared in ".root" class in css stylesheet so all node will inherit this change.

I would like for example to change a font color attribute used for all text in my application. This color can be changed dynamically in the application and should apply on all nodes using it.

Thanks

Solution

  • In general, your best bet for figuring out CSS settings is to look at the source code for the default stylesheet.

    For example, font colors are actually managed by automatically selecting from one of three fixed font colors, depending on the intensity of the background (so you don't end up with white text on a white background, for example):

    /* One of these colors will be chosen based upon a ladder calculation
 * that uses the brightness of a background color.  Instead of using these
 * colors directly as -fx-text-fill values, the sections in this file should
 * use a derived color to match the background in use.  See also:
 *
 * -fx-text-base-color for text on top of -fx-base, -fx-color, and -fx-body-color
 * -fx-text-background-color for text on top of -fx-background
 * -fx-text-inner-color for text on top of -fx-control-inner-color
 * -fx-selection-bar-text for text on top of -fx-selection-bar
 */
-fx-dark-text-color: black;
-fx-mid-text-color: #333;
-fx-light-text-color: white;

    So you can override these with something like

    .root {
    -fx-dark-text-color: navy;
    -fx-mid-text-color: blue;
    -fx-light-text-color: lightskyblue;
}

    in an external style sheet, and it will change the font color for the whole application. (If you're certain your backgrounds will never be a problem, you could make them all the same color, but I wouldn't recommend that.)

    The properties set here are actually "looked-up colors". Since values of looked-up colors are inherited from the parent node, these values will apply to the entire scene graph.

    If you want to do this from code, you can achieve the same with 

    root.setStyle(
    "-fx-dark-text-color:  navy ;"+
    "-fx-mid-text-color:   blue ;"+
    "-fx-light-text-color: lightskyblue ;");