How to use theming in QML for Ubuntu Phone

The Ubuntu Interface Toolkit Documentations documents Theming for QML Elements with a syntax that is quite similar to CSS. It sounds amazing to me, but I am unable to get started with it. I have tried a lot but I guess I’m missing answers to some fundamental questions:

  1. Are there any rules regarding where to place the .qmltheme files and how to name them?
  2. How is the reference done? Will the style rules I set in the .qmltheme file automatically append to the element that has the respective name set? Or do I have to somehow set a reference in the .qmltheme file to the file containing the QML-element, or the other way round, or both?

Maybe I didn’t understand an important part of the documenation. English is not a native language of mine and therefore this specific documentation is hard to get for me.


Unfortunately the documentation does not explain how applications should be themed, especially that this part is not fully implemented. However applications can still load theme files where they alter the system defined styles and specify their own ones.

  1. There is no specific rule where to put the application-specific theme file yet. However, it should be in a place the application knows and can access. The theme can be loaded using the Theme.loadTheme(url) function, where url is the URL/URI to the .qmltheme file. For example, assuming the theme file is in the "theme" folder relative to the application's folder, you should have Theme.loadTheme(Qt.resolvedUrl("./theme/mytheme.qmltheme"))

  2. I'm not sure I understand what you meant on "reference" in here. Do you refer to how a styled component will know which style to use, or you refer to how the QML-elements providing the visuals will be linked to the styled component?