Dynamically change QML theme at runtime

Question

I'm actually using the solution provided here: https://stackoverflow.com/a/25864815/2425044

I'd like to get rid of the import "MyTheme.js" as Theme; statement in order to dynamically load a specific theme at runtime (usually chosen by the user).

What I'm currently doing is loading each of my Themes.js files in a qrc file:

redTheme.qrc contains Theme.js
blueTheme.qrc contains Theme.js

These qrc files are compiled into external binary resources (rcc) and loaded from the binary directory, using

registerResource(const QString &rccFileName, const QString &mapRoot = QString())

So far, everything works. The only problem is that I'm stuck with an import statement in my QML files:

import "qrc:/redTheme/Theme.js" as Theme

Thus, despite registeringblueTheme.rcc as a resource, it will never be used.

Grégoire Borel Grégoire Borel · Accepted Answer · 2016-04-04T09:48:53

I was able to make it work, thanks to other threads.

First off, create your themes like this user does, which inherit from AbstractStyle, allowing much more flexibility.

https://stackoverflow.com/a/25866188/2425044

Our property will then be defined by the value returned by a JS function:

import "qrc:/graphics/componentCreation.js" as Theme

Item
{
    id: homeViewItem
    anchors.centerIn: parent

    // Load default theme at startup
    property AbstractTheme currentTheme: Theme.createThemeObject(homeViewItem, "qrc:/redTheme/redTheme.qml");

    Rectangle 
    {
        color: currentTheme.textColorStandard;
    }
}

componentCreation.js

// Create themes components and load them in the apps' QML files

var component;
var sprite;

function createThemeObject(item, themePath)
{
    component = Qt.createComponent(themePath);
    sprite = component.createObject(item);

    if (sprite === null)
        console.log("componentCreation.js: error creating " + themePath + " object");
    else
        return sprite;
}

Let's say you want to change theme when the user clicks on a Button:

Button
{
    id: themeButton
    text: "Change to blue theme"
    onClicked:
    {
        // Remove content of redTheme.rcc, register blueTheme.rcc
        cpp_class.changeTheme("redTheme", "blueTheme")
        // blueTheme's content is now available, let's fill its content into a QML object
        currentTheme = Theme.createThemeObject(homeViewItem, "qrc:/blueTheme/blueTheme.qml")
    }
}

Remember, redTheme.qml and blueTheme.qml are contained in qrc files which are themselves compiled into rcc files.

Here's the definition of changeTheme(const QString&, const QString&), which unregisters the old theme and registers the new one:

void cpp_class::changeTheme(const QString &oldTheme, const QString &newTheme)
{
    bool un = QResource::unregisterResource(QCoreApplication::applicationDirPath() + "/data/themes/" + app + "/" + oldTheme + ".rcc");
    if (!un)
        std::cerr << oldTheme.toStdString() << "could not be unregistered" << std::endl;
    bool in = QResource::registerResource(QCoreApplication::applicationDirPath() + "/data/themes/" + app + "/" + newTheme + ".rcc");
    if (!in)
        std::cerr << newTheme.toStdString() << "could not be registered as an external binary resource" << std::endl;
}

Other threads that have helped me:

https://wiki.qt.io/Qml_Styling

http://www.slideshare.net/BurkhardStubert/practical-qml-key-navigation (begins at slide 34)

Dynamically change QML theme at runtime

1 Answers