Defining custom colors in qml



  • 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?


  • Lifetime Qt Champion

    Hi and welcome to devnet,

    You can use a Style singleton like described here



  • 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.


  • Qt Champions 2016

    @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"



  • 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?


  • Qt Champions 2016

    @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.


  • Qt Champions 2016

    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
    }
    


  • @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.



  • @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.


  • Qt Champions 2016

    @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



  • 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
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.