Dynamically Modify Custom Style Class Properties in JavaFX Using CSS

Question

Dynamically Modify Custom Style Class Properties in JavaFX Using CSS

Embarking on my CSS journey, I have limited experience since I mainly worked with JavaFX applications and not web languages. In one of my JavaFX applications, I utilized a css style sheet featuring a Windows 10 UWP theme. The default style classes adhere to the standard windows grey button theme, but I also implemented a custom style class for colored components.

The colors are defined as variables within the .root style class for the default style, and then overwritten in the .colored style class for the colored elements.

.root 
{
    -fill-color: #CCCCCC;
    ...
}

.colored
{
    -fill-color: #DD2867;
    ...
}

Now, I am faced with the challenge of changing the colors of the colored style dynamically at runtime. I'm familiar with Node#setStyle(String) which allows me to modify the fill color using code like this:

root.setStyle("-fill-color: #FF00FF;");

However, this only affects the color in the .root style class and not the .colored style class.

Is there a way to directly modify a property of a specific style class at runtime, or perhaps a better approach for managing both default and colored styles?

Thank you in advance, Eleom.

java css javafx styling

Answer 1

Answer №1

Introduce a new custom color variable on the root element, and incorporate it into your .colored class:

{
    -primary-color: #FFFFFF;
    -custom-color: #36BBA6 ;
    ...
}

.colored
{
    -primary-color: -custom-color;
    ...
}

You can then dynamically update that color in your code like this:

root.setStyle("-custom-color: ... ;");

Answer 2

Introduce a new custom color variable on the root element, and incorporate it into your .colored class:

{
    -primary-color: #FFFFFF;
    -custom-color: #36BBA6 ;
    ...
}

.colored
{
    -primary-color: -custom-color;
    ...
}

You can then dynamically update that color in your code like this:

root.setStyle("-custom-color: ... ;");

Dynamically Modify Custom Style Class Properties in JavaFX Using CSS

Answer №1

Similar questions

Path to link to ms accdb file with reference to current file location

Tips for adjusting the color of the sidebar in an HTML email template

What is the reason for the Client Height value not affecting other elements?

A single class designed to handle two distinct deserialization processes

Utilizing JQuery to create a dynamic background image slider that cycles through images extracted from a selection of

Troubleshooting the Selenium Protractor Webdriver-Manager Update Problem on Ubuntu

Ways to monitor data usage for a specific network on an Android device

Issues arising from incorporating a Vaadin view into a JSP application

The picture is malfunctioning

``CSS: Styling a Rounded Div with a Clipped Scrollbar

Locate the parent element that has the smallest amount of space taken up by its child elements

Instructions for utilizing a contract class within an Android application

Is there a way to retrieve all CSS styles associated with a specific element?

Modify the background color of <td> elements depending on the specific value

How can CSS3 be used to target the initial or final visible element in a selection?

What is the best method for identifying an href element using Selenium webdriver in Java?

What is the most efficient way to transform Exif longitude and latitude into actual numerical values?

Creating a layout with Bootstrap 4 cards split into two rows

Encountering a null JSON response while using Retrofit library

Is there a way to properly size and align an inline image within a dynamically resizing DIV element?