Question

I am making an app with jQuery Mobile and PhoneGap. I want to dynamically chnge themes so I made somethinglike this:

function theme()
{
    Array.prototype.forEach.call(document.getElementsByTagName("*"), function (el) {
    el.setAttribute("data-theme", "e");
});
}

The problem is that themes change only after scrolling mouse on elements or for example on “tap” event.

How to fix it without reloading page? I want to set a theme and have it on all my sites, when they start.

Answer 1

You can’t in the way you’re trying. When jQuery mobile looks at the data-theme attribute before the page is shown, it does its magic for you. That is, it changes the applied CSS rules based on the choosen theme. So, if you want to not reload the page, you have to change the css rules and not the data-theme attribute. Something like this:

$('#button1').css(....);