Question

With jQuery Mobile I can create a page using a custom theme

<div data-role="page" data-theme="s" id="home">...

Now this works, but requires that I add this line in each of my pages and every-time I add a new page. I tried adding data-theme="s" to the body tag but this has no affect. Is there any way to do this other then setting it manually per page?

Answer 1

You would have to do it programmatically, AFAIK.

Something along the lines of:

$(document).bind( "mobileinit", function () 
{
    ...
    $.mobile.page.prototype.options.contentTheme = "z"; //your theme
    ...
});

Now, since there is no centralized hook – you will have to do the similar line for all theme options there are:

$.mobile.page.prototype.options.headerTheme
$.mobile.page.prototype.options.footerTheme

and so on.

I don’t have a list of all of them, but a quick look through the jquery.mobile-1.0rc1.js searching for .prototype.options. reveals these:

$.mobile.page.prototype.options.backBtnTheme
$.mobile.page.prototype.options.headerTheme
$.mobile.page.prototype.options.footerTheme
$.mobile.page.prototype.options.contentTheme
$.mobile.listview.prototype.options.filterTheme

so it seems to me that you can go with these and discover more as you go. Note that not all of them are created like that – some are constructed dynamically in the code. Look for Theme string to see what I mean.

Update

$.mobile.page.prototype.options.theme should be updated as well – based on Moak’s comment below.