Change 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 it works, but it requires me to add this line on each of my pages, and every time I add a new page. I tried adding the data-theme="s" tag to the body tag, but that did not affect. Is there a way to do this and then install it manually on the page?

Answer 1

You will need to do this 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 connection, you will have to make a similar line for all theme parameters:

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

etc.

I don't have a list of all of them, but a quick search for jquery.mobile-1.0rc1.js to search for .prototype.options. shows:

 $.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 

it seems to me that you can go with them and find out more when you go. Note that not all of them are created like this: some of them are dynamically built in code. Find the Theme line to understand what I mean.

Update

$.mobile.page.prototype.options.theme should also be updated - based on Mokak's comment below.

Answer 2

The following worked for me. Just make sure it is called after JQM initialization.

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