How to create a dynamic global theme for QML?

Question

This post declare global property in QML for other QML files shows very well how to create a global theme, but then how would you go about creating a theme that can be easily switched by the user? I imagine that there is some global signal stuff you would need, to tell the components the value changed, but would it already be implicit in the object?

For instance, what I want to be able to do is have a style that looks kind of like this:

pragma Singleton
import QtQuick 2.2


var boolean darkTheme = true;

function employDarkTheme() {
    darkTheme = true;
}

function employLightTheme() {
    darkTheme = false;
}

QtObject {

    property QtObject font: QtObject {
        property QtObject pointSize: QtObject {
            property int menu: 10
            property int normal: 12
            property int subTitle: 18
            property int title: 24
        }
        property QtObject color: QtObject {
            property color primary: darkTheme ? "black" : "white"
            property color secondary: darkTheme ? "white" : "black"
        }
    }

    property QtObject background: QtObject {
        property QtObject color: QtObject {
            property color primary: darkTheme ? "#333333" : "white"
            property color secondary: darkTheme ? "white" : "#333333"
        }
    }
}

Is something like this possible with the way QML is currently working?

score 2 · Answer 1 · answered Sep 18 '18 at 14:07

After playing around with it for a little bit, it actually is possible and fairly simple to do. If instead of the previous code, you use:

pragma Singleton
import QtQuick 2.2

QtObject {
    property var darkTheme: true

    property QtObject font: QtObject {
        property QtObject pointSize: QtObject {
            property int menu: 10
            property int normal: 12
            property int subTitle: 18
            property int title: 24
        }
        property QtObject color: QtObject {
            property color primary: darkTheme ? "black" : "white"
            property color secondary: darkTheme ? "white" : "black"
        }
    }

    property QtObject background: QtObject {
        property QtObject color: QtObject {
            property color primary: darkTheme ? "#333333" : "white"
            property color secondary: darkTheme ? "white" : "#333333"
        }
    }
}

and change darkTheme whenever, it will change the object, activating the signals/slots and changing the whole app.

How to create a dynamic global theme for QML?

1 Answers1