Both the header and footer bars will be styled by default with the theme's "a" color swatch because these bars are typically primary in the visual hierarchy of a page.

We can, of course, change the theme swatch to one of our liking by adding a data-theme attribute to the bar:

<div data-role="footer" data-theme="b">
  <h4>Swatch B</h4>
</div>

Buttons automatically inherit the color swatch from the bar they are contained in, but can be styled differently to increase contrast and visibility by adding a data-theme attribute.

The jQuery Mobile website has a demo of the variations that can be achieved by tweaking the theme swatches and buttons inside the headers and footers: