Jquery mobile: update theme for all forms immediately - jquery-mobile

Question

Is it possible to change theme of all pages on the fly?
Example (code below and here) contains:
Single page template is used (each form is called via Ajax ).
Each form has back button
After applying chosen theme - all forms have to be updated to new theme. Only current form is updated in my example.
I`ve researched thoroughly before asking the question here but could not find an answer about theme rolling immediately for all forms, i.e.
Theme can be applied to all pages during "mobileinit" event
Theme can by applited to element
and so on
Thanks in advance
Html code:
<div data-role="page" data-theme="a" id="mainpage">
<div data-role="header" data-position="inline">
<h1>Name</h1>
Settings
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
Requirements
</li>
</ul>
<input type="button" value="Button" />
</div>
</div>
<div data-role="page" data-theme="a" id="date-requirements" data-add-back-btn="true">
<div data-role="header" data-position="inline">
<h1>Requirements</h1>
</div>
</div>
<div data-role="page" data-theme="a" id="settings-page" data-add-back-btn="true">
<div data-role="header" data-position="inline">
<h1>Settings</h1>
</div>
<div data-role="content">
<div data-role="collapsible" id="skin-settings">
<h4>Skin</h4>
<ul data-role="listview">
<li>Dark</li>
<li>Blue</li>
<li>Grey</li>
<li>White</li>
<li>Yellow</li>
</ul>
</div>
</div>
</div>
JS code:
$(document).ready(function(){
// configure transition effect
$.mobile.changePage.defaults.allowSamePageTransition = true;
$.mobile.changePage.defaults.transition="slide";
// configure back button
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Back";
// set skin
$('#skin-settings').find('ul').children('li').bind('touchstart mousedown', function(e) {
var currentTextSkin= $.trim($(this).text());
var newTheme;
switch (currentTextSkin)
{
case "Dark":
newTheme="a";
break;
case "Blue":
newTheme="b";
break;
case "Grey":
newTheme="c";
break;
case "White":
newTheme="d";
break;
case "Yellow":
newTheme="e";
break;
default:
newTheme="a";
}
var rmbtnClasses = '';
var rmhfClasses = '';
var rmbdClassess = '';
var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ];
$.each(arr,function(index, value){
rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
rmhfClasses = rmhfClasses + " ui-bar-"+value;
rmbdClassess = rmbdClassess + " ui-body-"+value;
});
// reset all the buttons widgets
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
// reset the header/footer widgets
$.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
// reset the page widget
$.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme);
// target the list divider elements, then iterate through them and
// change its theme (this is the jQuery Mobile default for
// list-dividers)
$.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
$(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme);
});
});
});

Answer 1

Solution given by #Omar is mostly correct but new created objects (on demand) inherit default theme, so code below change default style both already created and oncoming objects
$(document).ready(function(){
// configure transition effect
$.mobile.changePage.defaults.allowSamePageTransition = true;
$.mobile.changePage.defaults.transition="slide";
// configure back button
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Back";
// set skin
$('#skin-settings').find('ul').children('li').bind('touchstart mousedown', function(e) {
var currentTextSkin= $.trim($(this).text());
var newTheme;
switch (currentTextSkin)
{
case "Dark":
newTheme="a";
break;
case "Blue":
newTheme="b";
break;
case "Grey":
newTheme="c";
break;
case "White":
newTheme="d";
break;
case "Yellow":
newTheme="e";
break;
default:
newTheme="a";
}
var rmbtnClasses = '';
var rmhfClasses = '';
var rmbdClassess = '';
var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ];
$.each(arr,function(index, value){
rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
rmhfClasses = rmhfClasses + " ui-bar-"+value;
rmbdClassess = rmbdClassess + " ui-body-"+value;
});
// reset all the buttons widgets
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
// reset the header/footer widgets
$.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
// reset the page widget
$.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme);
// target the list divider elements, then iterate through them and
// change its theme (this is the jQuery Mobile default for
// list-dividers)
$.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
$(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme);
});
// change default theme
// Page
$.mobile.page.prototype.options.headerTheme = newTheme; // Page header only
$.mobile.page.prototype.options.contentTheme = newTheme;
$.mobile.page.prototype.options.footerTheme = newTheme;
// Navigation
$.mobile.page.prototype.options.backBtnTheme = newTheme;
// Listviews
$.mobile.listview.prototype.options.headerTheme = newTheme; // Header for nested lists
$.mobile.listview.prototype.options.theme = newTheme; // List items / content
$.mobile.listview.prototype.options.dividerTheme = newTheme; // List divider
$.mobile.listview.prototype.options.splitTheme = newTheme;
$.mobile.listview.prototype.options.countTheme = newTheme;
$.mobile.listview.prototype.options.filterTheme = newTheme;
// dateboxes
$.mobile.datebox.prototype.options.theme=newTheme;
$.mobile.datebox.prototype.options.themeHeader=newTheme;
// timemode
$.mobile.datebox.prototype.options.themeButton=newTheme;
$.mobile.datebox.prototype.options.themeInput=newTheme;
// calendar mode
$.mobile.datebox.prototype.options.themeDateToday=newTheme;
$.mobile.datebox.prototype.options.themeDayHigh=newTheme;
$.mobile.datebox.prototype.options.themeDatePick=newTheme;
$.mobile.datebox.prototype.options.themeDateHighAlt=newTheme;
$.mobile.datebox.prototype.options.themeDate=newTheme;
});
});