jQuery Mobile comes with a default theme that you can use. However, it isn’t really a single theme, there are actually several (sub) themes, called swatches, that are inserted into the theme. These swatches are specified by a single letter.
This means you can call for a different theme, within your website, for a part of a page, or for an entire page if you wanted to. All you will need to do is call that swatch. It is a good way to draw attention to an element.
The default theme has two of these swatches, a light (a) and a dark (b) color theme. You can see an example of both of them below.
To change which theme you want to use, change the data-theme attribute. For example data-theme=”a” the default.
Creating your own theme
You can also create your own theme. So if you don’t want/need their theme, you can make something yourself. To create your first theme, you will want to go to: http://themeroller.jquerymobile.com/.
You will start with three swatches. Your theme roller will allow you to specify the global settings (those good for all swatches), as well as selecting the unique elements for each swatch.
Once you select a swatch, by clicking on the letter, you can also choose to delete that swatch.
Likewise, you can add more swatches if you want/need to.
Colors can be imported either from Kuler, or by using a color selector. If you want to have lighter or darker swatches, you can build your first color, then duplicate it, and use a color tool to adjust light/darkness as well as saturation, and drag the color to the new swatch.
You will get hover states, so it will work on a desktop environment, as well as a mobile environment, so don’t forget to set those.
Once you are done, you can Download your theme, share it, or import (before you get started).
Another cool tool is the inspector. By selecting the inspector, you can click on an element on the screen, and go to the correct swatch and section to edit. This is easier than guessing, especially when you are starting out.
When you download, it will give you what you need to include the theme, as well as what you will need to load to ensure you load your theme properly.
Working with jQuery Mobile Themes was originally found on Access 2 Learn
