Is there any easy way to switch themes dynamically with JQuery Mobile?

Question

Like the question says, is there some way I can go about switching themes in JQuery Mobile dynamically. I just upgraded to beta 1 today and thought it would be cool if the user could pick there own theme if they want. I haven't seen anything in the documentation to do this specifically, but certainly there is some way to go about it, if someone could just point me in the right direction.

Answer 1

Hardly sure, but it looks to me like jQuery Mobile's demo has a little theme switcher right inside it. Looks like this is the code that calls it:

$("#someElement").bind("vclick", function() {
    $.themeswitcher();
});

You can find the theme switcher's code right here.

Didn't mess around with it, but this sure looks like what you're talking about.

Answer 2

I use a dropdown to allow my users to choose a theme. Here is the code I use for that:

  function changeTheme() {
    var theme = $("#ddlTheme :selected").val();
    var cssUrl = 'css/themes/' + theme + '/jquery-ui-1.8.13.custom.css';

    var themeStyle = $("#theme-style");
    themeStyle.attr({
        rel:  "stylesheet",
        type: "text/css",
        href: cssUrl
    }); 

  }

Create a <link> tag with the id "theme-style". Make it point to your default link.

I use theme roller to create my themes and add them to a sub directory under my css/themes directory named for the theme it represents. I place this value in the dropdown to display to the users.