Styling Qt Quick Controls 2

Qt Quick Controls 2 comes with a selection of styles.


The Default style is a simple and light-weight all-round style that offers the maximum performance for Qt Quick Controls 2.	The Material style offers an appealing design based on the Google Material Design Guidelines, but requires more system resources than the Default style.	The Universal style offers an appealing design based on the Microsoft Universal Design Guidelines, but requires more system resources than the Default style.

Using Styles in Qt Quick Controls 2

In order to run an application with a specific style, either configure the style using QQuickStyle in C++, pass a command line argument, or set an environment variable. Alternatively, the preferred style and style-specific attributes can be specified in a configuration file.

The priority of these approaches follows the order they are listed below, from highest to lowest. That is, using QQuickStyle to set the style will always take priority over using the command line argument, for example.

Using QQuickStyle in C++

QQuickStyle provides API for configuring a specific style. The following example runs a Qt Quick Controls 2 application with the Material style:


  #include <QGuiApplication>
  #include <QQmlApplicationEngine>
  #include <QQuickStyle>

  int main(int argc, char *argv[])
  {
      QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
      QGuiApplication app(argc, argv);

      QQuickStyle::setStyle("Material");

      QQmlApplicationEngine engine;
      engine.load(QUrl("qrc:/main.qml"));

      return app.exec();
  }

Command line argument

Passing a -style command line argument is the convenient way to test different styles. It takes precedence over the other methods listed below. The following example runs a Qt Quick Controls 2 application with the Material style:


  ./app -style material

Environment variable

Setting the QT_QUICK_CONTROLS_STYLE environment variable can be used to set a system-wide style preference. It takes precedence over the configuration file mentioned below. The following example runs a Qt Quick Controls 2 application with the Universal style:


  QT_QUICK_CONTROLS_STYLE=universal ./app

Configuration file

Qt Quick Controls 2 support a special configuration file, :/qtquickcontrols2.conf, that is built into an application's resources.

The configuration file can specify the preferred style (may be overridden by either of the methods described earlier) and certain style-specific attributes. The following example specifies that the preferred style is the Material style. Furthermore, when the application is run with the Material style, its theme is light and the accent and primary colors are teal and blue grey, respectively. However, if the application is run with the Universal style instead, the theme is dark and the accent color is red.


  [Controls]
  Style=Material

  [Universal]
  Theme=Dark
  Accent=Red

  [Material]
  Theme=Light
  Accent=Teal
  Primary=BlueGrey

In order to make it possible for Qt Quick Controls 2 to find the configuration file, it must be built into application's resources using the The Qt Resource System. Here's an example .qrc file:


  <!DOCTYPE RCC><RCC version="1.0">
  <qresource prefix="/">
      <file>qtquickcontrols2.conf</file>
  </qresource>
  </RCC>

Note: Qt Quick Controls 2 uses a file selector to load the configuration file. It is possible to provide a different configuration file for different platforms and locales. See QFileSelector documentation for more details.

Finally, the .qrc file must be listed in the application's .pro file so that the build system knows about it. For example:


  RESOURCES = application.qrc

Contents