Search code examples
javafxgluon

Can I modify a gluon swatch color?

I'd like to use the gluon swatch color scheme but the blue is not quite the right shade. Is it possible to change this with e.g. a css entry? What would be the key?

Solution

  • Have a look at the Gluon Mobile documentation for swatches.

    Each swatch populates a series of pre-specified CSS properties which can be used within your own CSS. The properties that are populated for each swatch are like the following:

    -primary-swatch-50
-primary-swatch-100
-primary-swatch-200
...
-primary-swatch-900
-alternate-swatch-100
...

    And they can be used as:

    .button {
     -fx-background-color: -primary-swatch-500;
}

    The swatches provided by Glisten are based on the Material Design color style guide, and you can use them as:

    @Override
public void postInit(Scene scene) {
    Swatch.BLUE.assignTo(scene);
}

    from your MobileApplication class.

    But nothing prevents you from modifying the predefined swatches: In your css file, override the swatch properties with your own palette of colors:

    .root {
    -primary-swatch-500: #0000ff;
}