Disable default color on button down

baky

Re: Customize color on button down or active

I believe it is this exact same issue but there was no solution for it.

I have a function that should change the color of the button if it is being hovered over or if it is pressed.

However, there is a default functionality for the colors of the button that seems to be taking precedence over my function.

I was able to get the hover aspect of it working by setting flat: true but still when I press the button I get the same button down default white background.

Here is my qml file:

import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: btnToggle

    // CUSTOM PROPERTIES
    property url btnIconSource: "../../images/png_images/icons8-menu-rounded-90(-xxhdpi).png"
    property color btnColorDefault: "#1c1d20"
    property color btnColorMouseOver: "#23272e"
    property color btnColorClicked: "#00a1f1"

    QtObject {
        id: internal

        // MOUSE OVER AND CLICK CHANGE COLOR
        property var dynamicColor: if(btnToggle.down){
                                       btnToggle.down ? btnColorClicked : btnColorDefault
                                   } else {
                                       btnToggle.hovered ? btnColorMouseOver : btnColorDefault
                                   }
    }

    flat: true
    implicitWidth: 70
    implicitHeight: 60

    background: Rectangle {
        id: bgBtn
        color: internal.dynamicColor

        Image {
            id: iconBtn
            source: btnIconSource
            smooth: false
            layer.format: ShaderEffectSource.RGBA
            antialiasing: false
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            height: 25
            opacity: 1
            visible: true
            width: 25
            fillMode: Image.PreserveAspectFit
        }
    }
}

EDIT: I noticed that i can see the color I chose for button down actually behind the white background (the blue color sticking out of the corners). So my function seems to be working but there is a color being displayed over it. See below: