Set Qml TabBar tab color?

Question

I tried this code to set TabBar tab background color but only selected tab color is changed. How can I set color for other tabs? Also, how can I set text color for tabs?

TabBar {
    id: tabBar

    currentIndex: swipeView.currentIndex

    background: Rectangle {
        color: "#f4d37c"
    }

    TabButton {
        id: cardsTabButton
        height: Style.line2Height
        text: qsTr("Cards")
    }

    TabButton {
        id: errorsTabButton
        height: Style.line2Height
        text: qsTr("Errors")
    }
}

(left tab is selected)

Answer 1

You can customize any of QML.2 control, include TabBar. See this page for more info. Simple example:

TabBar {
    id: tabBar
    anchors.fill: parent
    background: Rectangle {
        color: "yellow"
    }
    TabButton {
        height: 30
        text: "Tab1"
        background: Rectangle {
            color: tabBar.currentIndex == 0 ? "orange" : "green"
            radius: 10
        }
    }
    TabButton {
        height: 30
        text: "Tab2"
        background: Rectangle {
            color: tabBar.currentIndex == 1 ? "purple" : "lightblue"
            radius: 10
        }
    }
}