Themes en jQuery Mobile

Pueden ser diferentes para diferentes partes de la aplicación. Hay 2.Vista previa::
http://jquerymobile.com/demos/1.1.1/docs/pages/pages-themes.html

<section id="firspage" data-role="page" data-theme="a">
	<header data-role="header" data-theme="d">
		<h2>Cabecera</h2>
	</header>
	<div data-role="content" data-theme="e">
		<p>Esta es la primera página</p>
		<p><a href="#secondpage">Ir a la segunda página</a></p>
	</div>
	<footer data-role="footer" data-theme="b">El pie de la página</footer>
</section>

Sobreescribir los estilos del theme

• Si sobreescribimos usando estilos en línea, funcionará siempre.
• Si no usamos estilos en línea, es posible que no funcione, en cuyo caso, habrá que utilizar toda la ruta de elementos hasta acceder al elemento que quiero maquetar. Ej:
  section#firstpage div#content a
• De todas formas, lo más práctico será usar el modificador !important:
  h2{background:red !important;}

Ejercicio

Crear un theme usando themeroller, e importarlo para que funcione en alguno de los ejercicios que hemos realizado.

La hoja de estilos jquery.mobile.css contiene una estructura y un theme, ambos juntos en el mismo documento. Al importar un theme, tendré que importar el structure.css (disponible zip descargado de jquerymobile.com) y el theme.css generado con themeroller, cada uno por separado.