Themes en jQuery Mobile

En jQuery Mobile, los themes (temas) son un sistema de estilos que permite cambiar la apariencia visual de los elementos de la interfaz (botones, listas, encabezados, etc.) sin tener que escribir CSS desde cero.

jQuery Mobile usa un sistema de swatches (variantes de tema identificadas por letras, como a, b, c, etc.). Cada letra representa una combinación de colores y estilos predefinidos.

<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.