6

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?

Moak
  • 12,596
  • 27
  • 111
  • 166

2 Answers2

8

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.

ZenMaster
  • 12,363
  • 5
  • 36
  • 59
  • 1
    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. – Moak Oct 28 '11 at 03:25
  • along with `$.mobile.page.prototype.options.theme` this worked – Moak Oct 28 '11 at 07:32
  • 1
    In 1.4.0 (not sure of previous releases), you need to do this after you load jquery.js and BEFORE jquery.mobile*.js – Lou Franco Jan 30 '14 at 20:32
  • Also in 1.4.0, it's sufficient to just set `$.mobile.page.prototype.options.theme` – Lou Franco Jan 30 '14 at 21:47
1

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

$.mobile.page.prototype.options.theme = "b";
dtbarne
  • 8,110
  • 5
  • 43
  • 49