Setting properties of Custom Components using QML does not work, what is the problem in following logic?

I have following two qml files. I want to change the color of the button to darker tone when i press it and then restore the color when i release the button. But with evety click button color gets darkened only and the text on it becomes unreadable after few clicks. What is the actual problem with this logic ?

// CustomButton.qml

import QtQuick 2.12

Item {
    property alias text: name.text
    property alias color: btn.color
    property var old_color

    Rectangle {
        id: btn
        width: name.implicitWidth
        height: name.implicitHeight
        radius: 4
        color: "beige"
        border {
            color: Qt.darker("beige")
            width: 2
        }

        Text {
            id: name
            padding: 20
            text: "Click Me"
        }

        MouseArea {
            anchors.fill: parent

            onPressed: {
                old_color = btn.color
                btn.color = Qt.darker(btn.color)
            }

            onReleased: {
                btn.color = old_color
            }

            onClicked: {
                console.log("clicked " + name.text)
            }
        }
    }
}

// main.qml

import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480

    CustomButton {
        text: "Register"
        x: 100; y: 100
        color: "red"
    }

    CustomButton {
        text: "Login"
        x: 200; y: 200
    }

    CustomButton {
        x: 300; y: 300
    }
}

As folibis said in the comment on your question the way you are using the var type for the color property will create a Value Type Reference. This acts like a reference/pointer hence the color object is passed around and re-used resulting in the color becoming darker and darker. To solve that use color as the type of your property. As a rule of thumb always use a QML type if possible instead of relying on var.

That said you can also write your button without the need of assignments like this:

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    component CustomButton : Item {
        id: button
        property alias text: name.text
        property color color: "beige"

        Rectangle {
            id: btn
            width: name.implicitWidth
            height: name.implicitHeight
            radius: 4
            color: mouseArea.pressed ? Qt.darker(button.color) : button.color
            border {
                color: Qt.darker("beige")
                width: 2
            }

            Text {
                id: name
                padding: 20
                text: "Click Me"
            }

            MouseArea {
                id: mouseArea
                anchors.fill: parent
            }
        }
    }

    CustomButton {
        text: "Register"
        x: 100; y: 100
        color: "red"
    }

    CustomButton {
        text: "Login"
        x: 200; y: 200
    }

    CustomButton {
        x: 300; y: 300
    }
}

In CustomButton.qml

import QtQuick 2.12

Item {
    property alias text: name.text
    property alias color: btn.color
    property var old_color

    Rectangle {
        id: btn
        width: name.implicitWidth
        height: name.implicitHeight
        radius: 4
        color: "beige"
        border {
            color: Qt.darker("beige")
            width: 2
        }

        Text {
            id: name
            padding: 20
            text: "Click Me"
        }

        MouseArea {
            anchors.fill: parent

            onPressed: {    
                btn.color = Qt.darker(btn.color)
            }

            onReleased: {
                btn.color = old_color
            }

            onClicked: {
                console.log("clicked " + name.text)
            }

        }
    }
    Component.onCompleted: old_color = color.toString()
}

old_color should keep its initial value after Item is created.