how to make a theme switcher using the jQuery mobile's data-theme attribute

Question

I want to make a theme switcher using the data-theme attribute of the jQuery mobile framework. When the user clicks a link which has a data-theme inside it, all my pages' data-theme attribute should be replaced with this clicked data-theme attribute. To get a better idea of what I'm trying to do see this page at the jQuery mobile site, it's pretty close to what I'm trying to do for my pages except that it only updates the current page, and I want to update all of the webApp pages.

Answer 1

Have you looked at jquery ui theme roller?, it's available for Jquery Mobile too

http://jquerymobile.com/themeroller/

generate a set of themes and switch it accordingly. Here's a link on switching: http://midnightprogrammer.net/post/Change-Page-Themes-Dynamically-Using-JQuery-Theme-Roller.aspx

Answer 2

You can set data-theme="THEME_LETTER" as a php variable. Then, have links on the page to switch themes. When the user clicks a link for theme "b", it will set a session variable, and then on each page load, the THEME_LETTER will be set by php to reflect their selection.

inside the HTML, it would look like this:

data-theme=" <?php echo $_SESSION['THEME_LETTER']; ?> "