The default jQuery Mobile theme offers a considerable degree of customization options, but the range of colors and style are, of course, limited. What if we want to add our own colors? And what if we want to change the font or the dropshadow color or roundedness of buttons?
For this we turn to ThemeRoller, a powerful, free, what-you-see-is-what-you-get UI builder available on the jQuery Mobile website. ThemeRoller offers a visual interface from which we can set a variety of color, font, and other options to define our own custom theme; once happy with our design, we can download a single CSS file, link to it in our pages, and thus apply the design choices to our sites.
Open up ThemeRoller in your browser to try it out:
The "Help" docs (via the link at upper right) offer a helpful overview of the interface:
The ThemeRoller interface has three major zones: the left column contains the inspector panel, along the top is the QuickSwatch/Kuler bar, and below this is the preview window.
Use the inspector pane to set global theme settings on the first tab and tweak the individual style options for each swatch. Above the tabs, there are links to download, share, or import a theme.
In the QuickSwatch bar, you can turn the inspector feature on to automatically expand the relevant inspector section when you click on an element in the preview pane. Drag and drop a color from the QuickSwatch panel onto an element in the preview pane and the tool with automatically calculate text color and shadow, borders, gradients and even button states. The sliders make it easy to adjust the lightness and saturation of the colors. Click the Adobe Kuler Swatches to load premade color palettes from Adobe's popular color palette sharing site.
The preview pane shows a sample of common jQuery Mobile widgets that shows a live update each time you make a change to the theme so you can quickly test and tweak the theme.
When using ThemeRoller, you can either set color options by typing hex codes or by dragging a color onto the element. Similarly, you can type explicit values for the roundedness of corner or drag a slider.
ThemeRoller offers convenient integration with Adobe Color (formerly known as "Adobe Kulur" - ThemeRoller stills bears the old name), a free online color-theme-generation tool. To use Adobe Color, login with a valid Adobe account (register for free, if needed). Once logged in, you can search and browse public themes - filtering by "newest", "highest rated", or other criteria - or create your own. I created a theme ("Webucator JQM") you can view online - I'll use it in the demo below.
With Adobe Color you can create a theme from an uploaded or Flickr-stored image or from a specific base color. You can select rules ("analogous", "triad", etc.) from color theory to generate the scheme, drag axes around a color wheel, or set colors explicitly with HSV, RGB, Hex, or other settings.
Once you create an Adobe Color theme, you can use its colors in ThemeRoller, adding them to toolbars, buttons, or other elements as desired. To use a saved Adobe Color theme from within ThemeRoller:
- Click the "Adobe Kuller swatches" link at the top of ThemeRoller.
- Choose "Search Title" from the drop-down.
- Enter (in this case) "webucator" as the search term.
- Click each color square to add it to ThemeRoller's "Recent Colors" palette, from which you can use the colors in desired elements of the theme.
Let's look at an example. We used the colors from the Adobe Color theme we created above to render a custom theme in ThemeRoller. While it might offend some folks' artistic sensibilities, the process works quite nicely:
We click "Download theme zip file" at the top of the ThemeRoller interface, save the .zip file, and unpack the .zip archive. We edit the index.html file to include our standard Nan & Bob's content - including, in this case, some widget and form elements to highlight the theme's color style rules. Here's the resulting page - easily styled as desired with minimal coding:
The only work we need to do here to make the custom theme work is to get the linked stylesheets right. We link to the downloaded (and conveniently minified) stylesheet, themes/webucator.min.css. Also, instead of linking to the standard jQuery Mobile stylesheet (jquery.mobile-1.4.5.min.css), we instead link to the (also CDN-hosted) "structure" stylesheet: jquery.mobile.structure-1.4.5.min.css. This ensures that we get the CSS we need to "run" jQuery Mobile, but without the default color/font/etc. theme; we now get these style rules from our custom, downloaded stylesheet.