Barry's jQuery Mobile Demos: Themes


A jQuery Mobile theme is a colour scheme that can be applied to buttons, bars and other widgets. Themes are labelled with a letter from 'a' to 'z'. Two standard themes are defined by default: 'a' is black foreground on a grey background and 'b' is white foreground on black background.

We can specify themes most jQuery mobile components. A theme can be specified for pages, headers, footers, dialogs, buttons, icons, etc. We will look at the way to specify a themes when we discuss each of these. More importantly, you will want to experiment with your own themes.

The most importantfeatureof themes are that they are inheriteted from the enclosing jQury Mobile structure. This means, for example, themes for the header, main and footer of a jQuery Mobile page are inherited from the enclosing page definition. A component can override the inherited theme by declaring its own theme use. The following example shows the current theme in several page compoents.

<div data-role="page" id="page1" data-theme='c'>
  <div data-role="header" data-theme="a">
	<p>Header has theme 'a'.</p>
  <div data-role="main">
    <p>Main inherits theme 'c' from page definition.
	Any enclosed widgets will also use theme 'c'.</p>
  <div data-role="footer" data-theme='d'>
	<p>footer has theme 'd'.</p>

Remember, the default theme is theme 'a' so unless an enclosing component has a theme definition then theme 'a' will be used.


You probably guesed that accounting for all of the possible widgets in jQuery Mobile and their themes would be very complex and prone to error. The developers of JQuery Mobile have realised this and have developed a visual tool to help you construct themes. It is called Themeroller and it allows you to build visually large CSS code bases for re-use in your appplications. Incorportaing themes generated by themeroller is well documented on the themeroller website.