Is there a way to apply my UI theme roller theme to my jquery mobile site?

I have already built a standard site using a modified jQuery UI theme roller theme. I am trying to apply the same theme to my jQuery mobile site. It seems many of the css classes don't match up.

.ui-btn      <-- in mobile
.u开发者_StackOverflow社区i-button   <-- in theme roller

Is there a tool that helps match the two of these up?

UPDATE: It's here:

• http://jquerymobile.com/blog/2011/10/28/announcing-themeroller-for-mobile-beta/

I know that jQM is working on a Theme Roller as well:

• http://jquerymobile.com/blog/

Related:

• http://jquerymobile.com/test/docs/api/themes.html
• http://as001.productscape.com/themeroller.cfm

ThemeRoller Mobile: Coming soon!

We’ve been working on a completely new ThemeRoller tool, built from the ground-up for jQuery Mobile. Tyler Benzinger from Adobe has been spearheading the development effort (thanks Tyler!) and we’re very close for having a beta version ready for release. We’re really excited to show it off because there are a lot of super cool features that make it drop-dead-simple to build a stunning theme in minutes.

If you’re going to be at the jQuery Conference in Boston, you’ll get a sneak peek during the mobile keynote with Scott and Todd. Look for a beta version to be launch within the next week or two.

You could hack a solution into place; when two CSS classes have the same purpose but different names, you could go to the ThemeRoller CSS and search for instances of "ui-button" and modify it so that (for example) a line says:

.ui-button { rule }

becomes

.ui-button, .ui-btn { rule }

But damn that's an ugly hack, not a real solution. And if the rules are more complex, you can't just do a search-and-replace. The whole thing would be annoying to maintain, too. Ditto for modifying the base of either JavaScript; you could change all the DOM manipulations that add "ui-btn" to add "ui-button" instead, but it's a maintenance nightmare.

There's a jQuery UI Mobile ThemeRoller that's to be released soon. You could just wait for that and make a new theme that mimics your old one. Strikes me as the way to go. Otherwise, if it can't wait I would personally just migrate any styles from ThemeRoller to the Mobile stylesheet for now. It's manual labor, but is a teeny bit more future-proof.

You have correctly discovered that the class names are not the same in the two frameworks. You could write some JavaScript that searches for specific jQuery Mobile classes and adds the jQuery UI classes that correspond to that element.

Example:

$('.ui-btn').addClass('ui-button');