Theme design

A theme offers a way to change the visual appearance of S60 UI components. It allows the user to change the look and feel of the user interface, while leaving the functionality unaffected. Although an S60 device can 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 S60 UI components, including third-party applications built with S60 components.

Figure: 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 S60 UI components. It is possible to change the colours or graphics used in S60 UI components.

Figure: S60 Status pane

For example, a 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

For more information on the panes, see S60 UI panes and changes introduced in Feature Pack 2.

A theme can affect the look and feel of numerous features in S60 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 S60 UI components. All S60 UI components (and their features) that have not been personalised by the active theme reflect the S60 default theme. This means that even though a user has activated a specific theme, there may be some S60 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 S60 look and feel; the colour and bitmap definitions of the active theme replace those of the default theme.

Third-party applications that have utilised S60 UI components will be affected by the active theme. This means that all S60 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 S60 UI components, the look and feel of the custom-made components will not change in any way. Also, if the S60 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: Custom UI components are not affected by themes.

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

In this section: