Defining custom colors in qml

vikramg

Coming from the Android development world, I am used to defining my own colors in a colors.xml file. I am trying to replicate that facility in QML. I have found that I am able to do the following:

    Item {
        id: customColors
        property color tealish_black:   "#030b0d"
        property color light_sea_green: "#a1ede8"
    }

and then use the colors like so:

ApplicationWindow {

    color: customColors.tealish_black

However, this works only if the customColors Item is defined in the same qml file. I would like to define all my custom colors in a colors.qml and be able to use those color values in all other qml files I might create. How can I go about this?

SGaist

Hi and welcome to devnet,

You can use a Style singleton like described here

vikramg

I tried the following based on the singleton example:

Colors.qml:

pragma Singleton
import QtQuick 2.0

QtObject {
    property color tealish_black: "#030b0d"
    property color light_sea_green: "#a1ede8"
}

qmldir file:

module CustomStyles
singleton Colors 1.0 Colors.qml

In main.qml:

import CustomStyles 1.0

However, QtCreator flags an error saying "QML module not found". If I try to run anyway, the build error is 'module "CustomStyles" is not installed'. The import path section says that the default path does include the current directory. Right now everything I am doing is indeed in one directory, so this should not have been a problem. What am I missing?

As an aside, what is the right way to create a qmldir file from inside Qt Creator? The New File dialog does not seem to suggest any suitable options.

benlau

@vikramg said:

However, QtCreator flags an error saying "QML module not found".

You need to set "QML_IMPORT_PATH" in your .pro/.pri file. And run Tools -> QML/JS -> Reset Code Model in Qt Creator.

For example:
quickandroid/quickandroid.pri at master · benlau/quickandroid

If I try to run anyway, the build error is 'module "CustomStyles" is not installed'. The import path section says that the default path does include the current directory. Right now everything I am doing is indeed in one directory, so this should not have been a problem. What am I missing?

Is CustomStyles folder located in the same directory as the entry point of your QML application? If not, you need to add the import path to QQmlEngine/ QQmlApplicationEngine.

As an aside, what is the right way to create a qmldir file from inside Qt Creator? The New File dialog does not seem to suggest any suitable options.

I usually just use "New File -> General -> Empty File"

vikramg

I originally did not have CustomStyles as a subfolder; all files were in a single flat application directory. Moving the module to a CustomStyles subfolder got rid of the Qt Creator "QML module not found" error. But still stuck at 'module "CustomStyles" is not installed'. I have the following:

Base application directory QtQTest contains:

main.cpp
deployment.pri
main.qml
MainForm.ui.qml
qml.qrc
QtQTest.pro
QtQTest.pro.user

Subfolder CustomStyles contains:

Colors.qml
customstyles.qrc
qmldir

.pro file has:
RESOURCES += qml.qrc \
CustomStyles/customstyles.qrc
QML_IMPORT_PATH += $$PWD

qml.qrc:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>MainForm.ui.qml</file>
    </qresource>
</RCC>

CustomStyles/customstyles.qrc:

<RCC>
    <qresource prefix="/">
        <file>Colors.qml</file>
        <file>qmldir</file>
    </qresource>
</RCC>

Added imports to main.cpp:

    QQmlApplicationEngine engine;
    engine.addImportPath("qrc:/");
    engine.addImportPath("qrc:/CustomStyles/");

Can't get past the 'module "CustomStyles" is not installed' error.

I feel like I'm taking stabs in the dark. Is there a tutorial that explains how the directories are structured and what files go where?

benlau

@vikramg said:

CustomStyles/customstyles.qrc:

<RCC>
    <qresource prefix="/">
        <file>Colors.qml</file>
        <file>qmldir</file>
    </qresource>
</RCC>

Now you put Colors.qml to qrc:/// instead of qrc:///CustomStyles. In fact, you don't really customstyles.qrc. Instead , you may add Colors.qml and CustomStyles/qmldir to qml.qrc.

ekkescorner

why not simply do it this way:

main.qml

ApplicationWindow {
    id: root
    property color light_sea_green: "#a1ede8"

.......
Another.qml

Label {
    text: "my light sea green from root"
    color: root.light_sea_green
}

vikramg

@benlau said:

Now you put Colors.qml to qrc:/// instead of qrc:///CustomStyles. In fact, you don't really customstyles.qrc. Instead , you may add Colors.qml and CustomStyles/qmldir to qml.qrc.

Ah, because of the <qresource prefix="/">. Although I had originally tried adding CustomStyles/Colors.qml and CustomStyles/qmldir to the top-level qml.qrc and it still doesn't work ('module "CustomStyles" version 1.0 is not installed). There is some progress, the version number is now displayed in the error message, but it still won't run.

vikramg

@ekkescorner
Is there a way to "include" the custom color property's as a file into the main.qml? I would want to use the same set of colors in multiple projects, and I suppose I could copy-paste all the definitions, but would be best to have them in a separate file. Hence the attempt to group them in a Colors.qml.

benlau

@vikramg

@vikramg said:

@benlau said:

Now you put Colors.qml to qrc:/// instead of qrc:///CustomStyles. In fact, you don't really customstyles.qrc. Instead , you may add Colors.qml and CustomStyles/qmldir to qml.qrc.

Ah, because of the <qresource prefix="/">.
yes

Although I had originally tried adding CustomStyles/Colors.qml and CustomStyles/qmldir to the top-level qml.qrc and it still doesn't work ('module "CustomStyles" version 1.0 is not installed). There is some progress, the version number is now displayed in the error message, but it still won't run.

That is a working example, you may use it as a reference:

quickandroid/Constants.qml at master · benlau/quickandroid
quickandroid/qmldir at master · benlau/quickandroid
quickandroid/quickandroid.qrc at master · benlau/quickandroid

vikramg

Finally was able to get this to work, using Approach 2 from here:
http://wiki.qt.io/QmlStyling

All that is needed is the following-

./CustomStyles/Colors.qml:

pragma Singleton
import QtQuick 2.5

QtObject {
    readonly property color tealish_black: "#030b0d"
    readonly property color light_sea_green: "#a1ede8"
}

./CustomStyles/qmldir:

singleton Colors Colors.qml

./main.qml:

import "./CustomStyles"

./qml.qrc:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
        <file>MainForm.ui.qml</file>
        <file>CustomStyles/Colors.qml</file>
        <file>CustomStyles/qmldir</file>
    </qresource>
</RCC>

Now colors from Colors.qml can be accessed thus in main.qml, and the project runs without errors:

    color: Colors.light_sea_green