18
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);
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