Important: Please read the Qt Code of Conduct -

How to make ToolButton icon grayscale?

  • I have a QML app with a ToolBar with ToolButtons with images, for example, a ToolButton that loads something is defined in QML in this way:

    ToolButton {
        contentItem: Image { source: "Icons/load.png" }
        enabled: scene.loadEnabled

    and I am looking for a sample code that automatically makes the icon grayscale when the ToolButton is disabled.

    Should I manually implement the algorithm that makes the image graysacle and bind Image.source to a property returning the resulting image or there is a better way?

  • Qt Champions 2018

    You can do it with Desaturate :

    import QtGraphicalEffects 1.0
        contentItem: Image {
            source: "Icons/load.png"
            layer.enabled: true
            layer.effect: Desaturate {
                desaturation: parent.enabled ? 0 : 1
                Behavior on desaturation { NumberAnimation { easing.type: Easing.InOutQuad } }

Log in to reply