JavaFX CSS: Custom Functions

Question

I'm wondering if there is a way to add custom functions to JavaFX CSS, I'm primarily interested in this for creating a function to get the complementary color.

Currently the only color transformation functions are derive and ladder.

The problem with using derive for this is that it only adjusts brightness, and in one direction.

Thank you for any help in advance

JavaFX Color Reference

Answer 1

One way to make JavaFX CSS much more useful is to use LESS with JavaFX.

All you need is a jlessc and a small utility class to help you when you set a stylesheet on a control.

For example:

myControl.getStylesheets().add(
    LessLoader.compile(getClass().getResource("styles.less")).toExternalForm());

This will allow you to use color functions like saturate, lighten, darken and fadein as well as many other benefits LESS brings.

The LessLoader class I'm using here is simply:

public class LessLoader {

  public static URL compile(URL url) {
    try {
      try (InputStream in = url.openStream()) {
        String data = new String(in.readAllBytes(), StandardCharsets.UTF_8);

        String compiledCSS = Less.compile(url, data, false, new ReaderFactory() {
          @Override
          public Reader create(URL url) throws IOException {
            return super.create(url);
          }
        });

        Path tempFile = Files.createTempFile(null, null);
        Files.write(tempFile, compiledCSS.getBytes(StandardCharsets.UTF_8), StandardOpenOption.CREATE);

        tempFile.toFile().deleteOnExit();

        return tempFile.toUri().toURL();
      }
    }
    catch(IOException e) {
      throw new IllegalStateException(e);
    }
  }
}

Answer 2

You can add a list of colors to your main CSS:

Style.css

 /* Colors
    -------------- */
    *{
        -color-primary:#d8d8d8;
        -color-accent:#F44336;
        -color-secondary:#1E88E5;
        -color-dark-primary:#1d1d1d;
        -color-amber:#ffc400;
        -color-gray:#666666;
    }

And use it anywhere:

@import "../main/Styles.css";

.background {
    -fx-background-color: -color-amber;
}