Gluon Mobile Dialog Appbar Customization - gluon-mobile

Question

I have a Settings View with a styled AppBar and when I open a full screen dialog from that View, the AppBar styling follows the global swatch specified.
THEN, when I close the dialog box, the Settings View AppBar retains the dialog styling (it should have a white background, but it's green which is the swatch that is specified for the application).
Further Clarification:
The View is a page for Settings and then when you click each setting a dialog pops up with the content set to StackPanes that contain information for that specific setting.
I have tried to add a method that stylizes the AppBar on Dialog close, hide, and hidden event handlers:
public void initView(SettingView viewType) {
View pane = null;
try {
switch (viewType) {
case PASSWORD_CHANGE:
pane = getPasswordPane();
break;
case PROFILE_CHANGE:
pane = getProfilePane();
break;
case BANK_CHANGE:
pane = getBankPane();
break;
case NOTIFICATION_CHANGE:
pane = getNotificationPane();
break;
}
} catch (IOException e) {
System.out.println("IOException: " + e);
}
//this.settingsContainer = new Dialog(true);
this.settingsContainer.setContent(pane);
MobileApplication.getInstance().removeLayerFactory("$$$DropdownButtonSkin$$$");
Platform.runLater(new Runnable() {
#Override
public void run() { //None of these change the appbar styling
settingsContainer.setOnShowing(e -> { setAppBar("Settings");});
settingsContainer.setOnShown(e -> { setAppBar("Settings");});
settingsContainer.setOnHiding(e -> { setAppBar("Settings");});
settingsContainer.setOnHidden(e -> { setAppBar("Settings");});
//When closing the appbar the color remains to the swatch instead of the customized background
settingsContainer.setOnCloseRequest(e -> { setAppBar("Settings");});
settingsContainer.showAndWait();
}
});
}
public AppBar setAppBar(String name) {
Button menu = MaterialDesignIcon.MENU.button();
menu.setStyle("-fx-text-fill:darkgreen;");
menu.setOnMouseClicked(e -> {
MobileApplication.getInstance().showLayer(Appstar.MENU_LAYER);
});
AppBar appBar = MobileApplication.getInstance().getAppBar();
appBar.clear();
appBar.setNavIcon(menu);
appBar.setTitleText(name);
appBar.setVisible(true);
appBar.setBackground(new Background(new BackgroundFill(Color.WHITE, new CornerRadii(0), new Insets(0, 0, 0, 0))));
return appBar;
}

Answer 1

Considering that you want the same app-bar color on all views (i.e. white in all the views), the easiest way to solve this is to use CSS.
You can set the color of the AppBar on a full-screen dialog by using the custom style-class for the AppBar on a full-screen dialog i.e. dialog-fullscreen along with the base style-class app-bar. Therefore, you can use something like this:
.app-bar.dialog-fullscreen {
-fx-background-color: green; // OR -primary-swatch-500;
}
For setting the overall app-bar color to white, you can simply use:
.app-bar {
-fx-background-color: white;
}