Hildon theming overview

The hildon user interface that's powering maemo is themable (skinable) and the look can be customized to a great extent. An artist can develop his own skin and ship it in a stand-alone package for others to install and use. Currently a pixmap-based theming is used for performance reasons. Pixmap-based theming means that widget looks are being assembled from individual bitmap images used in different configurations. This doesn't mean, however, that the interface is not scallable. By repeating, stretching and tiling the bitmaps we can construct complex elements that can vary in size.

Layouts vs. themes

To make the process easier the actual theme layouts has been decoupled from the graphics. The layout contains the common gtkrc styles and other internal bits shared among all themes. The graphics consists of a single bitmap that can be easily handled by the artist (see end of this page for examples). In other words -- the layout is a static part of the theme while the graphics is the dynamic part. There is usually one layout per OS release -- ie. hildon-theme-layout-3 for Bora release. Basing on this particular layout one can develop themes that'll work on the Bora platform. With small graphic modifications (and basing on another layout) you can create theme package for another OS release.

It's important to understand that the relation between the theme and the layout is a statical one (think: statically-linked libraries). Therefore, the data from layout is extracted during theme building process and is statically embeded into the theme itself. Once the theme itself is built there is no way to change the layout.

http://www.mdk.org.pl/assets/2007/9/24/theme_diagram.png Theme diagram.png

Layout contents

The layout contains gtkrc files, matchbox (window manager) theme skeleton and other usefull files. The following things are hard-coded in the layouts and can't be changed from-within the theme:

  • Font sizes and styles
  • Widgets parameters (spacings, margins, distances)
  • Maemo desktop parameters (taskbar size etc.)

The following things can be adjusted at will:

  • All graphical elements/parts
  • All colors (including text colors and other logical colors)
  • Wallpaper

You can modify the fonts by adjusting the layout (or creating your own custom layout based on the existing one). Note however, that things might not work perfectly when you start changing this. Maemo UI at the moment is not perfectly scallable and breakes in certain places when ie. trying to use smaller font.

Theme contents

The source theme package consists mostly of one graphics file that is a template image with all widget elements. When the package is being built, the template is cut into individual images. At the moment of writing, the ready-made theme consists of several hundreds of small images. Those images are installed into /usr/share/themes/theme_name during the package installation.


The system presented was mostly introduced to fix/sanitize issues related to integration and packaging/handling process. It's still a bit sub-optimal from the artist point of view but can be extended in future. One idea would be to create a graphical tool for the artists to automatically generate themes without the need to setup a scratchbox environment.

More reading

Please also read the README documents for the layout package(s) and the developement theme. They contain some interesting packaging information about versioning system used and debian dependencies.

Attic/Hildon/ThemingOverview (last edited 2013-11-20 08:03:07 by WilliamJonMcCann)