How to switch Qt5 Controls QML styles in realtime - c++

Question

So my objective is to set up themes for an application that I have made. I would like to be able to check a menu option that will change the theme of the application as soon as I press it; and change the theme back to the native one on pressing the button. I understand how to style the Qt Quick Controls but I am having trouble with the loading and unloading of these themes. Currently my application comes with the native-like theme that Qt Controls comes with. I am able to load custom styles but I am unable to swap them the custom styles and the native theme. How would I go about creating this feature?
For example I am trying to swap the theme of a TableView. I first tried setting a property of TableViewStyle to be styleData.value This produced the desired effect of keeping the native-like theme, but now how would I go about assigning the Rectangle QmlObject to a property value? The interpreter complains about how I cannot assign a Object to a property.
TableViewStyle {
property string color: styleData.value
headerDelete: color // This does not work. Because
// styleData.value in undefined
//property string color: rect // Currently doing this does not
//Rectangle {id: rect; color: "red"} // have any effect on the value of
//headerDelegate: color // the headerDelegate. Putting the
// Rectangle in a Component produces
// The same value too.
}

Answer 1

I did not find a way to go back to the default style without having to load the element first with the default style and save it but this works for a Button switching between two custom styles and the default ButtonStyle
// Property used to save the default ButtonStyle
property var defaultStyle: undefined
// Property used to know the current style
property string currentStyle: "blue"
Button {
id: myBtn
text: qsTr("Hello World")
anchors.centerIn: parent
onClicked: {
if(currentStyle == "blue") {
style = myButtonStyleRed;
currentStyle = "red";
} else if(currentStyle == "red") {
style = defaultStyle;
currentStyle = "default";
} else {
style = myButtonStyleBlue;
currentStyle = "blue";
}
}
// Save the default Button style on load before switching to the blue one
Component.onCompleted: {
defaultStyle = myBtn.style;
myBtn.style = myButtonStyleBlue;
}
}
Component {
id: myButtonStyleBlue
ButtonStyle {
label: Text {
color: "blue"
text: control.text
}
}
}
Component {
id: myButtonStyleRed
ButtonStyle {
label: Text {
color: "red"
text: control.text
}
}
}