Change the default data-theme from jQuery Mobile

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?

Hydrotherapy

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.

Beefcake

OK, thanks, I will look into it and report back. This is a viable solution but it seems so silly that there wouldbn't be a method implemented for this. – Hydrotherapy

along with $.mobile.page.prototype.options.theme this worked – Hydrotherapy

In 1.4.0 (not sure of previous releases), you need to do this after you load jquery.js and BEFORE jquery.mobile*.js – Crunode

Also in 1.4.0, it's sufficient to just set $.mobile.page.prototype.options.theme – Crunode

Answer 2

The following worked for me. Just make sure it's called after JQM is initialized.

$.mobile.page.prototype.options.theme = "b";

Contemn