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 other container that has been assigned the data-role="page" attribute to ensure that the background colors are applied to the full page.
Below are examples of each of our default Theme's five swatches applied consistently across all page elements. Typically, you would mix and match swatches on various parts of the page to create visual texture &mdash: and the default jQuery Mobile Theme does mix and match — but this shows how each single swatch styles the various page elements:
+Below are examples of each of our default Theme's five swatches applied consistently across all page elements. Typically, you would mix and match swatches on various parts of the page to create visual texture — and the default jQuery Mobile Theme does mix and match — but this shows how each single swatch styles the various page elements: