Styling and theming a QML application can be done 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 (back button and 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. A QtObject is a non-visual QML component.

Declaring a singleton type in QML requires two steps. First you need to use the pragma singleton, it will indicate the use of a single instance of the component. The second step is to...