How do I change the header color of a TabPane in SceneBuilder?

Question

I want to change the header color (the grey one) on SceneBuilder. I've tried changing the background but it only changes the frame, not the top of the tab. I'm kinda new into JavaFX and CSS, so I don't know how to change it manually with CSS. Here's what I want to change:

I want to change the gray bar to blue.

Answer 1

You can change the header background for the TabPane using the appropriate CSS selector:

.tab-header-background {
    -fx-background-color: blue;
}

Result:

---

As far as I know, the only way to have the new style show up in SceneBuilder is to create a .css file with the code above, and then import it into SceneBuilder for your root element (for instance, a top-level AnchorPane):