Theming pages

Theming

jQuery Mobile has a rich theming system that gives you full control of how pages are styled. There is detailed theming documentation within each page widget, but let's look at a few high-level examples of how theming is applied.

The data-theme attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. The data-theme attribute could be added to the content container but we recommend adding it instead to the data-role="page" container to ensure that the background colors are applied to the full page

Swatch A

Back

Header A

Header

This is content color swatch "A" and a preview of a link.

Cache settings:
Button

Swatch B

Back

Header B

Header

This is content color swatch "B" and a preview of a link.

Cache settings:
Button

Swatch C

Back

Header C

Header

This is content color swatch "C" and a preview of a link.

Cache settings:
Button

Swatch D

Back

Header D

Header

This is content color swatch "D" and a preview of a link.

Cache settings:
Button