Theme design

A theme offers a way to change the visual appearance of UI components on a device. It allows the user to change the look and feel of the user interface, while leaving the functionality unaffected. Although a device may contain several themes, the user can only activate one theme at a time. When a theme has been activated, it will change the appearance of all applications that utilise standard UI components, including third-party applications built with the device OS components.
Figure 1. Themes allow the user to change the look and feel of the user interface (Courtesy of Mangothemes.com).
A theme consists of new look-and-feel definitions for UI components. It is possible to change the colours or graphics used in UI components.
Figure 2. S60 Status pane

For example, an S60 theme can change the appearance of the Status pane in the following ways:

  • Background bitmap for the entire pane can be changed
  • Signal pane: Foreground colour and the bitmap can be changed
  • Battery pane: Foreground colour and the bitmap can be changed
  • Context pane: The bitmap (that is, application icon) can be changed
  • Title pane: Foreground colour can be changed
  • Universal Indicator pane: Foreground colour can be changed
  • Navi pane: Foreground colour can be changed

A theme can affect the look and feel of numerous features in UI components. In fact, there are so many features that can be personalised by a theme that most themes only alter the look of the most visible and crucial UI components. All UI components (and their features) that have not been personalised by the active theme reflect the default theme. This means that even though a user has activated a specific theme, there may be some UI components that still have the default look and feel. A theme can be seen as a layer or skin that exists on top of the default look and feel of a device; the colour and bitmap definitions of the active theme replace those of the default theme.

Third-party applications that have utilised UI components of a device OS will be affected by the active theme. This means that all device UI components used in the application will adopt the look and feel defined in the active theme. If the application utilises custom-made components in addition to the device UI components, the look and feel of the custom-made components will not change in any way. Also, if the device UI components used in the third-party application have not been defined in the theme, the look and feel of those components will reflect the look and feel of the default theme.

Figure 3. Custom UI components are not affected by themes.

Third-party application developers should consider the effect of theme usage carefully when using device UI components. If the application uses only (or mostly) device UI components, the application will adopt the same look and feel as the device applications and fit smoothly into the device. However, if the application uses a mixed set of UI components (both device UI components and custom UI components), the effect of themes may be quite surprising to the visual appearance of the application.


Last updated 12 August 2011
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2012 All rights reserved