Question

Here is some javascript that I wrote that attempts to change the theme of the header of my jQuery Mobile application. It is in the head element of my web page after jQuery mobile javascript and CSS has loaded.

$(function() {
    $("[data-role='header']").attr('data-theme', 'b'); 
});

Why is it having no effect?

Answer 1

As it turns out, dynamically changing the theme of a header is easy since there is only a single class to change, that goes for buttons as well (if you have buttons in your header).

//store all the classes to remove from elements when swapping their theme
var removeClasses = 'ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e';

//when a specific page initializes, find links in the body and add an event
//handler to the click event for them to update the header's theme
$(document).delegate('#my-page', 'pageinit', function () {
    $(this).find('a').bind('click', function (event) {

        //get the new theme letter, stored in the HREF attribute of the link
        var newTheme = $(this).attr('href');

        //change the header's class/attr to relfect the new theme letter
        $.mobile.activePage.children('.ui-header').attr('data-theme', newTheme).removeClass(removeClasses).addClass('ui-bar-' + newTheme).children('h1').text('My Header (' + newTheme + ')');

        //change the header button's classes/attr to reflect the new theme letter
        $.mobile.activePage.children('.ui-header').children('a').removeClass(removeClasses).addClass('ui-btn-up-' + newTheme);
        return false;
    });
});​

Here is a demo: http://jsfiddle.net/jUgLr/1/

After all that I guess I should make sure you know you can just add a data-theme attribute to any element to change it’s theme:

<div data-role="page">
    <div data-role="header" data-theme="e">
        ...
    </div>
    <div data-role="content" data-theme="d">
        ...
    </div>
</div>