Mastering Qt 5

Theming the application with a QML singleton

Styling and theming a QML application can be executed in various ways. In this chapter, we will declare a QML singleton with the theme data used by custom components. Moreover, we will also create a custom Page component to handle the toolbar and its default item (the Back button and the page's title).

Please create a new Style.qml file:

pragma Singleton 
import QtQuick 2.0 
 
QtObject { 
    property color text: "#000000" 
 
    property color windowBackground: "#eff0f1" 
    property color toolbarBackground: "#eff0f1" 
    property color pageBackground: "#fcfcfc" 
    property color buttonBackground: "#d0d1d2" 
 
    property color itemHighlight: "#3daee9" 
} 

We declare a QtObject component that will only contain our theme properties. ...