Custom CSS for JavaFX virtual keyboard will not load

Question

In using the FXVK virtual keyboard, I would like to alter the default skin to my own whims. The css tags I found in the source code of JavaFX. These were added to a custom css and loaded as seen below.

public static void setVirtualKeyboardCSS() {
  @SuppressWarnings("deprecation")
  final Iterator<Window> windows = Window.impl_getWindows();

  while (windows.hasNext()) {
      final Window window = windows.next();
      if (window instanceof PopupWindow) {
          if (window.getScene() != null && window.getScene().getRoot() != null) {
              Parent root = window.getScene().getRoot();
              if (root.getChildrenUnmodifiable().size() > 0) {
                  Node popup = root.getChildrenUnmodifiable().get(0);
                  if (popup.lookup(".fxvk") != null) {
                      if (popup instanceof FXVK) {

                          FXVK keyboard = (FXVK)popup.lookup(".fxvk") // reference to the vk skin
                          ObservableList<String> sheets = keyboard.getStylesheets();
                          sheets.add("@customVK.css");
                          System.out.println("Setting keyboard stylesheet");
                      }
                  }
              }
          }
      }
  }
}

When the keyboard is expected to be shown, the call is made to this function and the output is shown that the call has been made. The CSS however does not change the layout. Using keyboard.getScene().getStyleSheets() instead of keyboard.getStyleSheets() also provides no working alternative.

Answer 1

Your code worked a lot for me, but, your error was that you must to call "setVirtualKeyboardCSS" function after the focus event propagates through the app and after the FXVK SubWindow is completely rendered.

public static final int TICK = 5;

public void setTimer() {
        timer = new Timer();
        timer.scheduleAtFixedRate(new TimerTask() {
            public void run() {
                Platform.runLater(() -> {
                    setVirtualKeyboradCss();
                });
            }
        }, TICK, TICK);
    }

    public void setVirtualKeyboradCss() {
        @SuppressWarnings("deprecation")
        final Iterator<Window> windows = Window.impl_getWindows();

        while (windows.hasNext()) {
            final Window window = windows.next();
            if (window instanceof Popup) {
                String vars = getClass().getResource("/css/variables.css").toExternalForm();
                String embed = getClass().getResource("/css/embeded.css").toExternalForm();

                FXVK keyboard = (FXVK) window.getScene().getRoot().lookup(".fxvk");
                if (keyboard != null) {
                    if (!keyboard.getStylesheets().contains(embed)) {
                        keyboard.getStylesheets().addAll(vars, embed);
                    }
                }

                timer.cancel();
                timer = null;
            }
        }
    }

variables.css

@font-face {
    -fx-font-family: "DINPro-Bold";
    src: url('/fonts/DINPro-Bold.otf');
}

* {
    -color-black: #303030;
    -color-white: #FFFFFF;
    -color-brownish-gray: #606060;
    -color-yellow: #FCB400;
}

embeded.css

.fxvk {
    -fx-background-color: -color-brownish-gray;
}

.fxvk .key{
    -fx-font-family: "DINPro-Bold", "sans-serif";
    -fx-border-image-source: null;
    -fx-border-radius: 3;
    -fx-background-radius: 3;
    -fx-background-color: radial-gradient(center 50% 50%, radius 60%, derive(-color-white, -65%), -color-black);
}

.fxvk .key:hover{
    -fx-background-color: -color-yellow;
}

.fxvk-secondary{
}

.shift-icon {
}

.capslock-icon{
}

.shift{
    -fx-fill: -color-white;
}

.special {
    -fx-fill: -color-white;
}

.backspace{
    -fx-fill: -color-white;
}

.enter {
    -fx-fill: -color-white;
}

.hide{
    -fx-fill: -color-white;
}

.multi-char-text{
    -fx-fill: -color-white;
}

.key-text {
    -fx-fill: -color-white;
    -fx-font-family: "DINPro-Bold", "sans-serif";
}

.key-alttext{
    -fx-fill: -color-white;
    -fx-font-family: "DINPro-Bold", "sans-serif";
}

.key-icon {
    -fx-fill: -color-white;
}

.multi-char-text{
    -fx-fill: -color-white;
}