Theme Customization and Extension

Each theme can be customized by adding one ore more CSS files. This allows you to keep the original file unmodified while getting your customized styles applied. Existing CSS rules/selectors will be overriden and new styles provided.
public class Demo extends Application {
  public void start(Stage primaryStage){
    new SyntheticaFXStandard(){
      protected void loadCssExtension() {
    Scene scene = new Scene(new RootPane(primaryStage, createContent()), 800, 600);
    primaryStage.setTitle("SyntheticaFX Demo");;
In the example above an additional style for a Palette window is loaded and can be easily applied to a window by adding the related style class. The Palette style was added to the right window below. As you can see the title panel and the font is smaller, all buttons except the close button have been removed and the shadow effect of the frame is smaller.
Frame f = new Frame(primaryStage, "Palette Frame Test", createContent());

In the example we used a custom FXML-file for the title pane to remove not needed buttons - palette.css:

    -sfx-fxml-title-pane: url("/test/frame/palette.fxml");
    -sfx-title-alignment: right;
    -fx-border-image-insets: 8; /*shadow-size;*/ 
    -fx-effect: dropshadow(three-pass-box, #888, 6, 0.005, 0, 0);
.palette:focused, .palette:selected{
    -fx-effect: dropshadow(three-pass-box, #444, 10, 0.01, 0, 0);
.palette .root-pane-title-pane{
    -fx-padding: 0 4 0 4;
.palette .root-pane-title-pane > .title-label{
    -fx-font-size: 0.9em;
    -fx-text-fill: #FEC;
    -fx-effect: null;
.palette .root-pane-title-pane > .close-button{
    -fx-background-color: red;

See also

CSS Reference - RootPane