jQuery Mobile

Chapter . Theming jQuery Mobile

jQuery Mobile includes a sophisticated theming system. Built with mobile applications in mind, it makes extensive use of CSS 3 capabilities to produce rounded corners, drop shadows, and gradients, making it lightweight and easily extensible.

The theming framework separates the ideas of color and texture from standard layout concepts of padding and dimension, so it’s possible to change the former without necessarily having to change the latter. This gives the framework great mix-and-match flexibility for producing wide variety of visual designs.

Themes and Swatches

In jQuery Mobile, a “theme” is a unified visual design applied across the interface. In practical terms, a theme specifies everything from fonts to drop shadows to colors.

In keeping with the idea of separating layout from color and texture, a jQuery Mobile theme can have multiple “swatches.” A swatch is a unified color concept governing the colors of background, text, shadows, iconography, etc.

The default jQuery Mobile theme includes five swatches (called a, b, c, d, and e). Each swatch provides different visual emphasis, with swatch a being the most visually emphatic (typically white text on a black background), and swatch d being much softer. Swatch e is an “error” swatch.

jQuery Mobile defaults to swatch c in most cases, but it is easy to specify a different swatch using the data-theme attribute. The data-theme attribute can be applied to any enhanced element and will cascade down through ...