-1

In my JavaFX project I am allowing users to set an accent color that will be used throughout the application. This accent color will be stored in a sqlite database.

Upon initialization, the database file will be read, and the accent color is applied. Currently this is done painfully by calling the .setStyle() method on every element that needs to be changed. This method is prone to mistakes and difficult to maintain. I am adding all elements that need the change applied to an array and looping through it, but it is easy to forget to add an element to the array every time I add a new button, etc. Not to mention different types of elements need different styles applied.

The only way I can think to accomplish this currently is to store the entire CSS element including accent color as a String, save the string to a .css file on the filesystem, and then load the external CSS. But this method is not graceful.

So I am aware of the following two ways to accomplish what I want, but both are not ideal.

  1. Call .setStyle() on every element, adding all elements to an array and looping
  2. Store my CSS in a String, save to the file system, load CSS, delete file from file system

Ideas like less, sass, and scss won't work because they require knowing what the color will be at build time, which I won't know. Having separate stylesheets prepared ahead of time won't work because there are millions of colors the user might choose.

An ideal answer would be some way to modify the add() method to accept css rules as a string (similar to how you pass them to .setStyle() method) instead of just a file path like this (example, does not work):

primaryStage.getScene().getStylesheets().add("-fx-background-color:" + getAccentColor() + ";");

Any ideas? Surely someone out there has provided user configurable accent colors before.

Thank you!

6
  • 2
    Does this answer your question? JavaFX CSS Dynamic Styling Commented Aug 21, 2020 at 0:13
  • 1
    You can also define your own looked-up colors, and then just change their values via calls to setStyle(...) Commented Aug 21, 2020 at 0:45
  • @James_D, hi James, I am interested in your answer in the other thread, but I do not really understand how to implement it. Specifically, I do not understand the theme factory/node section. I have a Parent object which is a subclass of node, but I do not directly have any nodes. Will you please help me understand how to implement and use the Theme class? Commented Aug 21, 2020 at 11:31
  • @Hawk, based on the question I think it probably answers my question as well, but I do not understand how to implement it when my project is built in FXML using SceneBuilder. I see that James_D is in this thread as well, hoping one of you can help me adapt the answer to work with FXML. Any help is appreciated. Commented Aug 21, 2020 at 11:39
  • What's wrong with just calling, for example, setStyle("-fx-base: "+getAccentColor()+";") on the root node? Commented Aug 21, 2020 at 12:32

2 Answers 2

0

Storing all nodes in an array and looping over them is ridiculous. In the linked question the accepted answer leverages the styleProperty in the style of reactive programming.

Another solution is to use CSS classes and swap out the stylesheets, as you have mentioned. This would be more of a generative approach. You can download the DB data of the styling on app setup, set the style, which just defines colours for specific CSS classes and reload it if the user changes it at runtime.

As you would rewrite the file on startup anyway, you can use Files.createTempFile(). Or you change it only when the user decides to change, that way you can keep the file.

Sign up to request clarification or add additional context in comments.

1 Comment

I agree it is ridiculous, hence the question. It wasn't so bad when there was only 3 buttons, but as I am building the UI it is clear that it is not maintainable and wasn't planned very well.
-1

This is the answer that I found that works perfectly without implementing new classes or overwriting URL handlers or anything crazy like that.

How to override JavaFX css by code for complex objects

Thanks to @James_D!

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.