Themes

Harmattan devices have two standard themes, base and blanco, which are used incrementally. The base theme contains mostly layouts and CSS definitions that stay consistent across different themes. The blanco theme contains a set of additional UI elements - such as icons - that are more application-specific.

The themes are incremental, in the sense that a theme can inherit the contents of an another theme and use the UI elements from that theme in places where it does not have a respective UI element defined. The default interaction between the base and the blanco theme is that blanco inherits base. Therefore when blanco is active on the device, all UI elements in base that do not have a counterpart in blanco are also used.

Note: base is not meant to be activated and used by itself on the device. It does not contain a full set of graphical content, which makes normal device use impossible.

The themes are located in the directory /usr/share/themes/ on the device. Every theme has its own subdirectory, which in turn contains other subdirectories for organizing the theme content. The contents of the theme subdirectory are indexed and should not contain files with similar names. When using an image or icon in an application, refer to it with the image://theme prefix and leave the file extension out.

The following QML code snippet sets file meegotouch-wallpaper-portrait.png from the blanco\meegotouch\images\backgrounds directory as the application background:

PageStackWindow {
   id: rootWindow
   PageStackWindowStyle {
       id: customStyle;
       background: "image://theme/meegotouch-wallpaper-portrait";
       backgroundFillMode: Image.PreserveAspectCrop
   }

When creating your own themes, the most convenient way is to inherit the blanco theme to use the default look-and-feel of the device in the places where your own theme does not have a defined UI element. Theme names and inheritances are defined in the index.theme file in the theme root directory.

The index.theme of blanco looks like the following:

[Desktop Entry]
Type=X-MeeGoTouch-Metatheme
Name=Blanco
Encoding=UTF-8

[X-MeeGoTouch-Metatheme]
X-Inherits=base
X-Icon="icon-l-meegotouchtheme-blanco"
X-Visible=true

[X-DUI-Metatheme]
X-Icon="icon-l-meegotouchtheme-blanco"
X-Inherits=base
X-Visible=true

When creating our own theme, the bolded parts must be edited to match your theme. Note that the selected icon is referred to in a similar manner as in the QML code earlier.

Harmattan icons

While you can create and use your own icons in the application, Harmattan devices contain an extensive library of preset icons that are well congruent with the overall look-and-feel of the device. When using the blanco theme, the icons can be found in directory /usr/share/themes/blanco/icons. The icon bank is not directly available anywhere for reference, but you can find a similar set of icons within the Simulator contents in Qt SDK, in directory QtSDK/Simulator/Qt/gcc/harmattanthemes/blanco/meegotouch/icons.

When you create custom icons, the icons must be in .png or .svg format, and their size cannot exceed 64x64 pixels.