title: Jquery mobile: update theme for all forms immediately
body: <p>Is it possible to change theme of <strong>all</strong> pages on the fly? </p>
  
  <p>Example (code below and <a href="http://jsfiddle.net/WebSerGe/7DfkU/5/" rel="nofollow noreferrer">here</a>) contains:</p>
  
  <ol>
  <li>Single page template is used (each form is called via Ajax ).  </li>
  <li>Each form has back button </li>
  </ol>
  
  <p>After applying chosen theme - all forms have to be updated to new theme. Only current form is updated in my example.</p>
  
  <p>I`ve  researched thoroughly before asking the question here but could not find an answer about theme rolling immediately for all forms, i.e. </p>
  
  <ul>
  <li>Theme can be applied to all pages during <a href="https://stackoverflow.com/questions/7924665/change-the-default-data-theme-from-jquery-mobile">"mobileinit" event</a></li>
  <li>Theme can by applited <a href="https://stackoverflow.com/questions/7667603/change-data-theme-in-jquery-mobile">to element</a></li>
  <li>and so on</li>
  </ul>
  
  <p>Thanks in advance</p>
  
  <p>Html code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div data-role="page" data-theme="a" id="mainpage"&gt;
      &lt;div data-role="header" data-position="inline"&gt;
          &lt;h1&gt;Name&lt;/h1&gt;
              &lt;a href="#settings-page" class="ui-btn-right" data-role="button" data-icon="gear"&gt;Settings&lt;/a&gt;
  &lt;/div&gt;
  &lt;div data-role="content"&gt;
          &lt;ul data-role="listview" data-inset="true"&gt;
              &lt;li&gt;
                  &lt;a href="#date-requirements" class="ui-link-inherit"&gt;Requirements&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;input type="button" value="Button" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="page" data-theme="a" id="date-requirements"  data-add-back-btn="true"&gt;
      &lt;div data-role="header" data-position="inline"&gt;
          &lt;h1&gt;Requirements&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div data-role="page" data-theme="a" id="settings-page"  data-add-back-btn="true"&gt;
      &lt;div data-role="header" data-position="inline"&gt;
          &lt;h1&gt;Settings&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
                  &lt;div data-role="collapsible" id="skin-settings"&gt;
                      &lt;h4&gt;Skin&lt;/h4&gt;
                      &lt;ul data-role="listview"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Dark&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Blue&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Grey&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;White&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Yellow&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS code:</p>
  
  <pre class="lang-js prettyprint-override"><code>    $(document).ready(function(){
      // configure transition effect
      $.mobile.changePage.defaults.allowSamePageTransition = true;
      $.mobile.changePage.defaults.transition="slide";
      // configure back button
      $.mobile.page.prototype.options.addBackBtn = true;
      $.mobile.page.prototype.options.backBtnText = "Back";
      // set skin
      $('#skin-settings').find('ul').children('li').bind('touchstart mousedown', function(e) {
          var currentTextSkin= $.trim($(this).text());
          var newTheme;
          switch (currentTextSkin)
          {
              case "Dark":
                  newTheme="a";
                  break;
              case "Blue":
                  newTheme="b";
                  break;
              case "Grey":
                  newTheme="c";
                  break;
              case "White":
                  newTheme="d";
                  break;
              case "Yellow":
                  newTheme="e";
                  break;
              default:
                  newTheme="a";
          }
          var rmbtnClasses = '';
          var rmhfClasses = '';
          var rmbdClassess = '';
          var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"  ];
          $.each(arr,function(index, value){
              rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
              rmhfClasses = rmhfClasses + " ui-bar-"+value;
              rmbdClassess = rmbdClassess + " ui-body-"+value;
          });
          // reset all the buttons widgets
          $.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
          // reset the header/footer widgets
          $.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
          // reset the page widget
          $.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme);
          // target the list divider elements, then iterate through them and
          // change its theme (this is the jQuery Mobile default for
          // list-dividers)
          $.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
              $(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme);
          });
      });
  });
  </code></pre>