change css variable javafx color

Question

style.css

* {
        -color : #00A0B1;
        -white : #F5F5F5;
        -gray : #95A5A6;
        -darkGray : #7F8C8D;
        -black : #2C3E50;
        -abort : #7F8C8D;
    }

.root{
    -fx-background-color : -white;
    -fx-fill-width : true;
    -fx-color : -color;
    -fx-fill-width : true;
    -fx-font-family: 'Segoe UI';
    -fx-focus-color : transparent;
    -fx-faint-focus-color: transparent;
}

I was hoping to make a color palette such that the -color variable can be changed. Is there a way to change the variable with a javafx controller? many thanks

Answer 1

The colors you have defined globally (-color, -white, -gray, etc) are called "looked-up colors" (see documentation). You can change the value of a looked-up color at runtime using an inline style. E.g.:

root.setStyle("-color: #ffff00 ;") 

will set the value of -color to yellow, for root and all the nodes it contains, unless those have a specific value assigned to them (in the language of CSS, looked-up colors are inherited).

Note that your CSS however assigns the looked-up color value directly to all nodes (because all nodes match the selector *). So you probably just want to define those on the root node, so that nodes will inherit any dynamically-applied value:

.root {
        -color : #00A0B1;
        -white : #F5F5F5;
        -gray : #95A5A6;
        -darkGray : #7F8C8D;
        -black : #2C3E50;
        -abort : #7F8C8D;

    -fx-background-color : -white;
    -fx-fill-width : true;
    -fx-color : -color;
    -fx-fill-width : true;
    -fx-font-family: 'Segoe UI';
    -fx-focus-color : transparent;
    -fx-faint-focus-color: transparent;
}