ThemeRoller! Styling jQuery Mobile apps has never been this easy

Back when jQuery Mobile was first announced, the jQM team promised a better way of creating color themes for your jQuery Mobile projects. That promise has now been fulfilled with the public release, just this past week, of ThemeRoller for jQuery Mobile. Part design-centered, part developer-centered, ThemeRoller is a tool that anyone can use. Let's dive in a take a look.

Jumping into ThemeRoller

The first thing you'll see when you launch ThemeRoller for jQuery Mobile are two nicely designed splash and intro screens. I've always loved the TR logo, and to have it spread across an entire screen makes this web tool feel more like an actual application. ThemeRoller loads quickly and then you're presented with a small help screen. This screen offers a few valuable tips so I recommend you read it at least once. I also recommend that the jQuery Mobile team add an option to this screen allowing users to skip subsequent display. Something along the lines of "Don't display again" would be helpful. This is also consistent with many actual software packages.

The ThemeRoller interface is well designed and pleasing to the eye. Users are presented with 3 blank themes (A, B, and C) with an array of common jQuery Mobile widgets (form controls, buttons, links, headers, etc.). Down the left side are a set of tab and accordion controls for advanced users, allowing them to change values for corner radius, box shadow, font-family, and more. To begin styling your desired theme, click the tab for the selected theme first. Changes can then be made by either dragging color swatches from the top directly onto the item in question. Advanced users can manually input hex values using the controls on the left side (or even drag a swatch onto an input field).

Editing Colors

Color swatches appear at the top of the tool and have two controls which allow customization: lightness and saturation. To the right of the main list of swatches are the last few colors selected by the user. Given that Adobe and jQuery have partnered together to work on jQuery Mobile it makes sense that ThemeRoller might include Adobe's excellent swatch sharing service Kuler and indeed it does. Just above the list of color swatches is a button labeled "Adobe Kuler swatches". Clicking on this button displays several categories of Kuler themes: newest, highest ranked, random, etc. It would be nice if the swatches were larger, or offered some sort of rollover so that you could more easily see the color. It would also be nice to allow the user to apply a Kuler theme directly to a jQuery Mobile theme with one click.

Editing the themes themselves is easy enough. New themes can be added (there are 26 total slots available) by clicking the + tab in the top left corner. Existing themes can be deleted by clicking the Delete button located to the right of the theme name in the Advanced controls. While specific color changes are made on a theme by theme basic under the lettered tab, global changes (which apply to all themes equally) including corner radius, fonts, and icon colors are made under the Global tab. While editing themes ThemeRoller allows users to toggle between preview and selection mode using the Inspector button. Turning on the Inspector mode introspects the selected item and opens the advanced controls directly to the area you wish to edit. I recommend that the jQuery Mobile team change this button label from Inspector to Preview to be more clear as to it's purpose. At the very least they could consider changing the toggle button to Inspector | Preview so that users know which mode they're in.

Downloading, Sharing, and Importing

Once you've designed your beautiful jQuery Mobile themeset, what's next? ThemeRoller is glad you asked. First off, you can download the theme. This creates a ZIP file containing a sample page using your theme, your CSS in both dev and production versions, a loading image, and the jQuery Mobile icons. Next you can Share your theme. This creates a link directly to your theme which lasts for 30 days. This is perfect for sharing between designers, clients, and the super picky CEO who wants to tweak everything down to the pixel. Finally, you can import a theme...this might be handy for developers who've previously download their theme and want to make a few quick edits. But remember, jQuery Mobile themes are plain CSS. Edit the dev version of the file just like you would any other CSS file. My only recommendation here would be to make the Download Theme button stand out a little more. It's in the header along with the logo and not with the other controls so it took me a minute to find it.

There's also a simple Help button which launches a modal window containing some basics about the tool. Useful but not terribly so. Don't rely on it to give you the down and dirty. While it's only just been released, it's still fair to offer some critiques.

A Few Suggestions

All in all ThemeRoller is a badass tool for a badass mobile development framework and I give it 3 thumbs up (don't ask). I've been looking forward to ThemeRoller since it was first announced and it doesn't disappoint. It's excellent as it is, and will only get better over time. Give it a try now and make your jQuery Mobile sites look better immediately.