JavaFX in-memory dynamic CSS file editing and applying

[Ty Young]

Does JavaFX have an API for dynamically editing and applying CSS files
in-memory? If not, would there be any possibility in one ever being made?


My reasoning for such an API is, instead of switching between completely
separate CSS files and having to update each whenever I need to support
a new component, I'd like the ability to just have 1 CSS file and edit
it's values in-memory and have it reflected in JavaFX as soon as the
change is made. For example instead of changing the individual
components themselves I'd like to get all of this:


*
{
    -fx-theme-header: #444444;
    -fx-theme-background: #3D3D3D;
    -fx-theme-background-alt: #2E2E2E;
    -fx-theme-selected: #F0544C;
    -fx-theme-label-text: #D2D2D2;
    -fx-theme-selectable-hover: #454545;
    -fx-theme-tab-close-color: -fx-theme-label-text;

    -fx-highlight-fill: -fx-theme-selected;
}


and modify it via a JavaFX API to change it to something like:


*
{
    -fx-theme-header: #FFFFFF;
    -fx-theme-background: -fx-theme-header;
    -fx-theme-background-alt: #F2F2F2;
    -fx-theme-selected: #CBEAFF;
    -fx-theme-label-text: #333333;
    -fx-theme-selectable-hover: #E1E1E1;
    -fx-theme-tab-close-color: -fx-theme-label-text;

    -fx-highlight-fill: -fx-theme-selected;
}


Since these are used throughout the CSS file, all the components that
use these will be updated.

[David Grieve]

Just setStyle -fx-theme-header (etc.) on the root node.

Post by Ty Young
Does JavaFX have an API for dynamically editing and applying CSS files
in-memory? If not, would there be any possibility in one ever being made?
My reasoning for such an API is, instead of switching between
completely separate CSS files and having to update each whenever I
need to support a new component, I'd like the ability to just have 1
CSS file and edit it's values in-memory and have it reflected in
JavaFX as soon as the change is made. For example instead of changing
*
{
    -fx-theme-header: #444444;
    -fx-theme-background: #3D3D3D;
    -fx-theme-background-alt: #2E2E2E;
    -fx-theme-selected: #F0544C;
    -fx-theme-label-text: #D2D2D2;
    -fx-theme-selectable-hover: #454545;
    -fx-theme-tab-close-color: -fx-theme-label-text;
    -fx-highlight-fill: -fx-theme-selected;
}
*
{
    -fx-theme-header: #FFFFFF;
    -fx-theme-background: -fx-theme-header;
    -fx-theme-background-alt: #F2F2F2;
    -fx-theme-selected: #CBEAFF;
    -fx-theme-label-text: #333333;
    -fx-theme-selectable-hover: #E1E1E1;
    -fx-theme-tab-close-color: -fx-theme-label-text;
    -fx-highlight-fill: -fx-theme-selected;
}
Since these are used throughout the CSS file, all the components that
use these will be updated.

[Ty Young]

Post by David Grieve
Just setStyle -fx-theme-header (etc.) on the root node.

That doesn't work, sadly. The actual FX CSS properties that utilize
-fx-theme-header don't update after setting a new value.

Post by David Grieve

Post by Ty Young
Does JavaFX have an API for dynamically editing and applying CSS
files in-memory? If not, would there be any possibility in one ever
being made?
My reasoning for such an API is, instead of switching between
completely separate CSS files and having to update each whenever I
need to support a new component, I'd like the ability to just have 1
CSS file and edit it's values in-memory and have it reflected in
JavaFX as soon as the change is made. For example instead of changing
*
{
    -fx-theme-header: #444444;
    -fx-theme-background: #3D3D3D;
    -fx-theme-background-alt: #2E2E2E;
    -fx-theme-selected: #F0544C;
    -fx-theme-label-text: #D2D2D2;
    -fx-theme-selectable-hover: #454545;
    -fx-theme-tab-close-color: -fx-theme-label-text;
    -fx-highlight-fill: -fx-theme-selected;
}
*
{
    -fx-theme-header: #FFFFFF;
    -fx-theme-background: -fx-theme-header;
    -fx-theme-background-alt: #F2F2F2;
    -fx-theme-selected: #CBEAFF;
    -fx-theme-label-text: #333333;
    -fx-theme-selectable-hover: #E1E1E1;
    -fx-theme-tab-close-color: -fx-theme-label-text;
    -fx-highlight-fill: -fx-theme-selected;
}
Since these are used throughout the CSS file, all the components that
use these will be updated.

[Matthieu BROUILLARD]

If what you want is to be able to test CSS changes on the fly on a running
javafx application during development for example; then you can also have a
look at CSSFX (https://github.com/McFoggy/cssfx).
If you do not want to setup CSSFX on your own, it has been integrated
inside Jonathan Giles "Scenic View" tool (
http://fxexperience.com/scenic-view/).
If you use a standard layout for your sources then the magic should apply;
if not you still can integrate CSSFX yourself to give it the good path to
your sources.

Post by Ty Young

Post by David Grieve
Just setStyle -fx-theme-header (etc.) on the root node.

That doesn't work, sadly. The actual FX CSS properties that utilize
-fx-theme-header don't update after setting a new value.

Post by David Grieve

Post by Ty Young
Does JavaFX have an API for dynamically editing and applying CSS
files in-memory? If not, would there be any possibility in one ever
being made?
My reasoning for such an API is, instead of switching between
completely separate CSS files and having to update each whenever I
need to support a new component, I'd like the ability to just have 1
CSS file and edit it's values in-memory and have it reflected in
JavaFX as soon as the change is made. For example instead of changing
*
{
-fx-theme-header: #444444;
-fx-theme-background: #3D3D3D;
-fx-theme-background-alt: #2E2E2E;
-fx-theme-selected: #F0544C;
-fx-theme-label-text: #D2D2D2;
-fx-theme-selectable-hover: #454545;
-fx-theme-tab-close-color: -fx-theme-label-text;
-fx-highlight-fill: -fx-theme-selected;
}
*
{
-fx-theme-header: #FFFFFF;
-fx-theme-background: -fx-theme-header;
-fx-theme-background-alt: #F2F2F2;
-fx-theme-selected: #CBEAFF;
-fx-theme-label-text: #333333;
-fx-theme-selectable-hover: #E1E1E1;
-fx-theme-tab-close-color: -fx-theme-label-text;
-fx-highlight-fill: -fx-theme-selected;
}
Since these are used throughout the CSS file, all the components that
use these will be updated.

[Pedro Duque Vieira]

Not sure if I totally understand what you want but you can change the
values of CSS variables through code by setting inline styles on
components, via setStyle method.

Pardon the publicity but yesterday I just happened to mention exactly that
on one of my posts and might help you:
https://pixelduke.com/2018/10/14/fxribbon-version-1-2-released/