Jquery mobile: update theme for all forms immediately

Question

Is it possible to change theme of all pages on the fly?

Example (code below and here) contains:

1. Single page template is used (each form is called via Ajax ).
2. 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>
            <a href="#settings-page" class="ui-btn-right" data-role="button" data-icon="gear">Settings</a>
</div>
<div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>
                <a href="#date-requirements" class="ui-link-inherit">Requirements</a>
            </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><a href="#">Dark</a></li>
                        <li><a href="#">Blue</a></li>
                        <li><a href="#">Grey</a></li>
                        <li><a href="#">White</a></li>
                        <li><a href="#">Yellow</a></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;
    });

});