javafx - Using both CSS and setStyle

Question

I have an object where I have css stylizing the object. In my program I would like to change specific elements in the styling such as background color. The problem that I have run into was that when I call setStyle(-fx-background-color:red) it will override all the styling elements. Even if I just change background color.

#header {
-fx-background-color: #4d4d4d;
-fx-border-color:  #545454;
-fx-border-width: 1px;
-fx-border-style: solid;
}
#header:hover {
-fx-background-color: #9ACD32;
}

Answer 1

You should define your colors in your CSS using "looked up colors".

See the JavaFX CSS reference for details.

Looked-up Colors

With looked-up colors you can refer to any other color property that is set on the current node or any of its parents. This is a very powerful feature, as it allows a generic palette of colors to be specified on the scene then used thoughout the application. If you want to change one of those palette colors you can do so at any level in the scene tree and it will affect that node and all its decendents. Looked-up colors are not looked up until they are applied, so they are live and react to any style changes that might occur, such as replacing a palette color at runtime with the "style" property on a node.

In the following example, all background color of all buttons uses the looked up color "abc".

.root { abc: #f00 }
.button { -fx-background-color: abc }

Sample Application

In the sample application, the key code is the setting of the looked up color value dynamically in code:

headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
    @Override
    public void changed(
        ObservableValue<? extends Toggle> observableValue, 
        Toggle oldToggle, 
        Toggle newToggle
    ) {
        RadioButton radio = (RadioButton) newToggle;
        header.setStyle("header-base-color: " + radio.getText());
    }
});

Together with the definition of the header-base-color lookup id for the color in the css below:

header-color.css

.root {
   header-base-color: #4d4d4d;
}

#header {
  -fx-background-color: header-base-color;
  -fx-border-color:  #545454;
  -fx-border-width: 1px;
  -fx-border-style: solid;
}

#header:hover {
  -fx-background-color: #9ACD32;
}

header-color.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?scenebuilder-stylesheet header-color.css?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import java.net.URL?>

<BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="HeaderColorController">
  <top>
    <HBox fx:id="header" prefHeight="-1.0" prefWidth="-1.0">
      <children>
        <Label text="A really hard to read label" />
      </children>
    </HBox>
  </top>
  <center>
    <VBox prefHeight="-1.0" prefWidth="-1.0" spacing="10.0" style="-fx-background-color: azure;">
      <children>
        <RadioButton mnemonicParsing="false" style="-fx-text-fill: forestgreen;" text="forestgreen">
          <toggleGroup>
            <ToggleGroup fx:id="headerColorToggleGroup" />
          </toggleGroup>
        </RadioButton>
        <RadioButton mnemonicParsing="false" style="-fx-text-fill: firebrick;" text="firebrick" toggleGroup="$headerColorToggleGroup" />
        <RadioButton mnemonicParsing="false" selected="true" style="-fx-text-fill: #4d4d4d;" text="#4d4d4d" toggleGroup="$headerColorToggleGroup" />
      </children>
      <padding>
        <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
      </padding>
    </VBox>
  </center>
  <stylesheets>
    <URL value="@header-color.css" />
  </stylesheets>
</BorderPane>

HeaderColorApp.java

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class HeaderColorApp extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("header-color.fxml"));
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

    public static void main(String[] args) { launch(args); }
}

HeaderColorController.java

import java.net.URL;
import java.util.ResourceBundle;

import javafx.beans.value.*;
import javafx.fxml.FXML;
import javafx.scene.control.*;
import javafx.scene.layout.HBox;

public class HeaderColorController {

    @FXML
    private ResourceBundle resources;

    @FXML
    private URL location;

    @FXML
    private HBox header;

    @FXML
    private ToggleGroup headerColorToggleGroup;

    @FXML
    void initialize() {
        assert header != null : "fx:id="header" was not injected: check your FXML file 'header-color.fxml'.";
        assert headerColorToggleGroup != null : "fx:id="headerColorToggleGroup" was not injected: check your FXML file 'header-color.fxml'.";

        headerColorToggleGroup.selectedToggleProperty().addListener(new ChangeListener<Toggle>() {
            @Override
            public void changed(ObservableValue<? extends Toggle> observableValue, Toggle oldToggle, Toggle newToggle) {
                RadioButton radio = (RadioButton) newToggle;
                header.setStyle("header-base-color: " + radio.getText());
            }
        });
    }    
}