Alex Rivera | Logout

How to change theme dynamically in jquery mobile?

Asked 2011-12-28T13:54:13.497
18

I am creating a mobile web applications using jQuery Mobile.

I am using theme-b for every page and I would like to change to another theme dynamically for every page. How can I change the theme dynamically?

Edit
Report

1 Answer

22

You can target specific classes that relate to specific widgets, reset their classes, and then add the themed class of your choosing:

    //set your new theme letter
    var theme = 'e';

    //reset all the buttons widgets
    $.mobile.activePage.find('.ui-btn')
                       .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
                       .addClass('ui-btn-up-' + theme)
                       .attr('data-theme', theme);

    //reset the header/footer widgets
    $.mobile.activePage.find('.ui-header, .ui-footer')
                       .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
                       .addClass('ui-bar-' + theme)
                       .attr('data-theme', theme);

    //reset the page widget
    $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
                       .addClass('ui-body-' + theme)
                       .attr('data-theme', theme);

http://jsfiddle.net/VNXb2/1/

This is by no means a fully functional code snippet, you will need to find any other widgets that you want updated when you switch the theme and add them to the code above. You can find what classes each widget has easily by using FireBug or another Developer Console.

UPDATE

When you take into account the data-role="list-divider elements this gets a little tricky:

var theme = 'c';

//the only difference between this block of code and the same code above is that it doesn't target list-dividers by calling: `.not('.ui-li-divider')`
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider')
                   .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hove
answered 2011-12-28T19:37:29.650

Your Answer