Search within TutorialsPark

jQuery Mobile : Themes


Learn how to use and apply jQuery Themes.


jQuery Mobile: Applying Themes

jQuery Mobile supports a lots to themes, it comes with a default theme included in the jQuery Mobile files.

You have an option to create your custom mobile theme using the application called Themeroller.

jQuery Mobile themes compriese of one or multiple swatches, which is nothing but a set of styles that are applied to different types of elements.

Swatches are denotes using single letter, beginning with A and going upto E.


In the Demo below, we use the attribute data-theme on the jQuery Mobile Page, the result of which is that the specified swatch is applied to all child Elements.

Example: jQuery Mobile - Applying Themes

Give it a TRY! » Note: The options denoted by letter a-e are referred as Swatches.


jQuery Mobile: Applying Swatch Themes to Individual Elements

The swatch themes can be applied on per element basis, to create custom style effects by mixing and matching as well.

In the Demo Below we have different values of data-theme attribute for each of the button Elements.

Syntax: jQuery Mobile Applying Swatch Themes to Individual Elements

Give it a TRY! » Note: The data-theme attribute is differen for each button.