Can I modify a gluon swatch color?

user_2746333 0
Viewed 452

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?

gluon javafx
1 Answers

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;
}

user_39560700
Related