Theming your jQuery Mobile site using ThemeRoller

The best way to theme your jQuery Mobile site is using ThemeRoller; an online app that allows you to create up to 26 theme "swatches" and download them for free.

Getting started

To access the app you need to go to http://jquerymobile.com/themeroller/

By default you will start with three swatches that look the same: A, B and C. You can add as many as 26 swatches, just by pressing the plus sign next to the letters on the left menu.

Theming

The easiest way to create your own color combinations is just drag one of the colors at the top to any element of a swatch.

Notice that you can adjust the "lightness" and "saturation" to get more color options. You can also use the Adobe Kuler swatches that provide coordinating color combinations.

Another great feature of ThemeRoller is the "Inspector". If you have used firebug or any of the browsers developer tools you will find this tool to be very familiar.

Turn the inspector "on" and select any element on the swatch you want to edit.

Once the element is selected, the related properties will be displayed on the left menu.

Here you can use more precise coloring with hexadecimal format and control shadows, borders, etc.

Notice that there are global styles for all swatches and custom styles for each one.

Exporting and Downloading

To export and download your newly created swatches, click the "Download Theme" button at the top left of the page.

Add whatever name you want and click on "Download Zip".

Inside the zip you will find the css file, as well as a minified version of the same file. You will also find a folder with the icons used by the theme. Follow the instructions to reference your new stylesheet and enjoy!

Note: You can edit your theme later using the "Import" button in the web app.