QML button change text color

Question

I'm new in QML and i want to personalize my buttons. I succeed to change the background's color and border color. But I don't success at all to change the color of the button's text. I saw we don't use anymore "style" to change the style but "background" and I don't understand everything about it.

Thanks for your help.

Button {
        id: buttonAC
        text: qsTr("AC")
        Layout.fillHeight: true
        Layout.fillWidth: true

        background: Rectangle {
            border.color: "#14191D"
            color: "#24292f"
            // I want to change text color next
        }

        /*Text {
            text: qsTr("AC")
            color: "#F54035"
        }*/
}

Solution 1

According to the doc

import QtQuick 2.6
import QtQuick.Controls 2.1

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
    }
}

Solution 2

The two fastest ways I found were to either use the following undocumented property:

Button {
     ....
     palette.buttonText: "white"
}

To go even further when customizing text colors during user interaction here is the ternary in the Button source code followed by a list of the properties to set accordingly:

color: control.checked || control.highlighted ? control.palette.brightText :
           control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText

Properties:

control.palette.brightText
control.palette.highlight
control.palette.windowText
control.palette.buttonText

The second dirty hack would be to use the onCompleted slot as follows:

Button {
     id: control
     ....
     Component.onCompleted: {
          control.contentItem.color = "white";
     }
}

Solution 3

If you just wanna change your text color, may you use html font style in your Button would be better. This will keeping other Item like button icon:

Button
{
    //...
    text: "<font color='#fefefe'>" + moudle + "</font>"
    font.family: "Arial"
    font.pointSize: 24
    //...
}

Solution 4

There is another way if you are using QML Styling. Replace 2.12 with your version of QML.

import QtQuick.Controls.Material 2.12    

Button {
    id: goToParenFolder
    text: "Hi"
    flat: true
    Material.foreground: "red"
}

This button's text will be in red and others will follow Material Style coloring.

To enable QML Styling and add the Material theme add QT += quickcontrols2 to your .pro file.

Also add #include <QQuickStyle> and QQuickStyle::setStyle("Material"); to main.cpp

View more solutions

Comments

[intika]

amazing ! you rocks ! i have been fighting the last 15min to set the color of a ToggleButton/ToggleButtonStyle your method worked :) thanks