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.

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.

• javascript
• jquery
• jquery-mobile

2 Answers 2

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.

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.