How to style the Background and the text color of the TableMenuButton context menu of a FXTable in JavaFX?

Question

When we enable the TableMenuButton on a FXTable we will get a context menu that enable to show and hide colomuns.

knowing that my table do have a specific styling I want to restyle this context menu background color and text color.

I don't know how!

Answer 1

You must add a CSS stylesheet which modifes TableView's ContextMenu. Depending on which table view you are using, delete 'tree' or w/o 'tree' lines:

.table-view .column-header .context-menu,
.tree-table-view .column-header .context-menu,
.table-view > .column-header-background > .show-hide-columns-button .context-menu,
.tree-table-view > .column-header-background > .show-hide-columns-button .context-menu {
    -fx-background-color: black;
}

If you want to change menu item's background color:

.table-view .column-header .context-menu .menu-item,
.tree-table-view .column-header .context-menu .menu-item,
.table-view > .column-header-background > .show-hide-columns-button .context-menu .menu-item,
.tree-table-view > .column-header-background > .show-hide-columns-button .context-menu .menu-item {
    -fx-background-color: green;
}

If you want to change menu item label's color:

.table-view .column-header .context-menu .menu-item > .label,
.tree-table-view .column-header .context-menu .menu-item > .label,
.table-view > .column-header-background > .show-hide-columns-button .context-menu .menu-item > .label,
.tree-table-view > .column-header-background > .show-hide-columns-button .context-menu .menu-item > .label {
    -fx-text-fill: yellow;
}