# Theming pages

Home

- Theme Overview
- A
- B
- C
- D
- E

## Page 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. While the `data-theme` attribute could be added to the content container, we recommend adding it instead to `div` or container that has been assigned the `data-role="page"` attribute to ensure that the background color is applied to the full page.

The default Theme mixes styles from multiple swatches to create visual texture and present the various elements in optimal contrast to one another:

# Default Theme

### Default Theme Content Header

This is the default content color swatch and a preview of a link.

Button

And each of the five "swatches" applies its style consistently across all page elements, as shown below:

## Swatch A

# Header A

### Header

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

Button

## Swatch B

# Header B

### Header

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

Button

## Swatch C

# Header C

### Header

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

Button

## Swatch D

# Header D

### Header

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

Button

## Swatch E

# Header E

### Header

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

Button

### More in this section

- Pages & Dialogs
- Anatomy of a page
- Single page template
- Multi-page template
- Page titles
- Linking pages
- Page transitions
- Dialogs
- Prefetching & caching pages
- Ajax, hashes & history
- Dynamically injecting pages
- Scripting pages
- PhoneGap apps
- touchOverflow feature
- Theming pages