Themes in jQuery Mobile

Contact Us or call 1-877-932-8228
Themes in jQuery Mobile

Themes in jQuery Mobile

jQuery Mobile themes are set via external CSS stylesheets. Themes consist of settings both for global style attributes - the radius of rounded corners, the color for the on-state of buttons, etc. and up to to 26 "swatches" (lettered from A to Z), each with a unique color scheme. Swatches define the colors, font settings, and textures for elements such as toolbars, content blocks, and buttons. jQuery Mobile recommends building themes with at least three swatches, A to C.

Without any overriding settings, jQuery Mobile uses the stock theme "a" swatch (a light-colored swatch) for most elements. In our work so far, the CSS rules for these swatches have come from the CDN-hosted CSS file we have included in the head of each of our jQuery Mobile. (For performance improvements, we've included the minified CSS file in all of our pages - here's the complete uncompressed CSS.) This default "a" swatch's CSS for toolbars includes, in part, this rule:

.ui-page-theme-a .ui-bar-inherit,
html .ui-bar-a .ui-bar-inherit,
html .ui-body-a .ui-bar-inherit,
html body .ui-group-theme-a .ui-bar-inherit {
background-color: #e9e9e9 /*{a-bar-background-color}*/;
border-color: #ddd /*{a-bar-border}*/;
color: #333 /*{a-bar-color}*/;
text-shadow: 0 /*{a-bar-shadow-x}*/ 1px /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ 	#eee /*{a-bar-shadow-color}*/;
font-weight: bold;

The background color (background: #e9e9e9) is light and the text color (color: #ddd) is dark.

In versions prior to 1.4, jQuery Mobile offered a set of five (lettered "A" through "E") swatches. Version 1.4 reduced that set to two: the "A" swatch (a light-background, dark-text theme) and the "B" swatch (a dark-background, light-text theme). The screenshot below shows the difference between the stock "A" and "B" swatches:

A vs B themes

Use the attribute data-theme="a" (or "b") to set any elements' theme: you can set pages, bars, listviews, buttons, and form elements to have a specific theme swatch. Contained elements inherit the theme swatch of their parent container.

For elements whose style is specified via CSS class, use the corresponding class to render the element by theme. For instance, an anchor (a) tag is rendered as a button with class="ui-btn"; use class="ui-btn ui-btn-b" to set swatch "B" for the button.