Adjustable UI Brightness with JavaFX

Maybe some of you know or have already worked with Adobe products like Premier Pro or After Effects.

From the perspective of a UI developer there are many cool things about these products. For example you can seamlessly fade the brightness of the UI and it looks great in every brightness level (which seems to be a hard task).

This is cool because there are good reasons for users to prefer either a dark or light interface. For example some creative artists like to work in a dimmed office so that no light from outside is overlaying the colors picture/video they are working on. In this situation a dark user interface is better then a light one because it's more comfortable for the eyes.

On the other hand I know people how prefer a light and friendly user interface because a dark one would give them a depressive fealing.

So it can be a big plus for the usability of your application when you allow the user to adjust the brightness of your app.

Adjustable Brightness in JavaFX

Something like this can be done with JavaFX too. With JavaFX 8 there was a new default stylesheet created known as modena.

In this stylesheet there is a color definition named -fx-base that is, as the name suggests, the base for all other color definitions in the stylesheet.

When you adjust the value of -fx-base all other colors will be adjusted automatically in relation to -fx-base.

Example

The first thing to do is to create an IntegerProperty that will hold the brightness level in a range from 0 to 100%.

IntegerProperty brightness = new SimpleIntegerProperty();

After that we create a StringExpression (which is a base class of StringBinding) that contains the style definition of -fx-base with the value of our brightness property.

DoubleBinding colorValue = brightness.multiply(2.55);

StringExpression styleString =
    Bindings.format("-fx-base:rgb(%1$.0f , %1$.0f, %1$.0f)", colorValue);

For this task we can use the Bindings.format method that takes a format string and an observable value. In the example I'm using the rgb css method to define the color. This method takes the color information for every channel in a range from 0 to 255. For that reason I'm creating a DoubleBinding that contains the multiplication of our brightness property (from 0 to 100) with 2.55 so that the value range is correct.

The last step is to bind the style property of the root container of your application to the StringExpression with our style definition.

Parent root = ...

root.styleProperty().bind(styleString);

This way the styling of the application is adjusted everytime the brightness property changes.

I've created a small example app that shows the usage of this binding. In the app I have bound the brightness property to a slider so you can change the brightness level without interruption. To demonstrate the effect I created a dummy form with some JavaFX controls.

Dark:

Medium:

Light:

You can find the example code on github: https://github.com/manuel_mauky/javafx-brightness-example. Feel free to use it in your own applications!