I'm doing a little practice and working with designing an interface that will consists of tabs, each containing its own set of data charts. I've done a lot of research online and for the most part its been very helpful; however, when its comes to modifying and customizing tabs, I am running into some issues. Firstly, I want to change the tab background color to match the background color of the tab content, so essentially, each tab will have it own custom color. I've setup a CSS file to keep all of my custom styles organized. I setup the following in my .css file:
Java FX Code:
.root {
-fx-font-family: "Charter";
-fx-font-size: 15;
}
.solartab .tab:selected {
-fx-background-color: #FFB84D;
}
.tab:selected .tab-label {
-fx-font-weight: bold;
}
.tab-pane .tab-header-area .tab-header-background {
-fx-background-color: #BDBDBD;
}
Within my JavaFX code :
Java FX Code:
Tab solarTab = new Tab("Solar Panel");
BorderPane solarPane = new BorderPane();
//Solar Bar Chart
CategoryAxis xHoursAxis = new CategoryAxis();
xHoursAxis.setLabel("Hours");
xHoursAxis.setCategories(FXCollections.<String>observableArrayList(time));
NumberAxis yPowerAxis = new NumberAxis();
yPowerAxis.setAutoRanging(true);
yPowerAxis.setLabel("Power");
BarChart solarChart = new BarChart(xHoursAxis, yPowerAxis);
solarPane.setCenter(solarChart);
solarTab.setStyle("-fx-background-color: #FFB84D");
solarTab.setContent(solarPane);
If I use the .setStyle() (above), the tab contains the custom color, all the time, but I would prefer it to change color only when selected as the .css file represents. When I try to use the custom tab from the css file, the code does not work and remains the default color.
Java FX Code:
solarTab.getStyleClass().add("solartab");
Also, I've tried to set the background for each tab differently, but it too remains the default color (grey).
