Theming with jQuery ThemeRoller

jQuery Mobile features a very robust and powerful theming system. You can easily control the look of the application down to the most miniscule of details. The framework even allows you to have various color swatches that you can switch between on-the-fly as well. Before we look at ThemeRoller, maybe we should talk briefly about jQuery themes.

The basics

When you download jQuery Mobile, you get five color swatches, A–E. These swatches were created with a great deal of attention paid to readability and usability, and range from high-contrast (swatch A) to the lowest contrast (swatch E). In addition to these differing contrasts, the themes are also arranged so that the most prominent areas of the page, such as the headers and buttons, get more contrast compared to areas such as the footer. When you create your own theme, you should adopt this model of thinking as well.

Note

For more information on jQuery theming, we highly recommended checking out one of...