Both the header and footer bars will be styled by default with the theme's "a" color swatch (black in the default theme) because these bars are typically primary in the visual hierarchy of a page. To set the header or footer bars to a different color in your theme, add the data-theme attribute and specify the letter of the theme swatch (a, b, c, etc.). For example, this will set the bar to swatch "b" (blue in the default theme):

		<div data-role="header" data-theme="b"> 
			<h1>Page Title</h1> 
		</div> 
		

Demo description

This is a demo of the variation that can be achieved by tweaking the theme swatches and buttons inside the headers and footers.

Headers

Footers