title: Toggling between two different stylesheets
body: <p>I am trying to toggle between two different stylesheets to display different theme styles.
  I have 2 different stylesheets that I want to toggle between.</p>
  
  <p>The stylesheets:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" title="light" href="css/default.css" /&gt;
  &lt;link rel="alternative stylesheet" type="text/css" title="dark" href="css/default_style2.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/component.css" /&gt;
  </code></pre>
  
  <p>I gave each stylesheet a title tag of light and dark for reference when the toggle will be clicked to change the stylesheets.</p>
  
  <p>my jQuery code:</p>
  
  <pre><code>&lt;div id="toggleTheme"&gt;
  
          &lt;script&gt;
  
          $(document).ready(function () {
              $("#light, #dark").click(function () {
                  changeStyle(this.getAttribute("rel"));
                  return false;
              });
  
              function changeStyle (light, dark) {
  
                  var light = $(this).attr('title') == "light";
                  var dark = $(this).attr('title') == "dark";
  
                  if ()
              }
  
          });
  
          &lt;/script&gt;
  
          &lt;ul id="themeToggle"&gt;
  
          &lt;a href="#" id="light"&gt;&lt;li&gt;light theme&lt;/li&gt;&lt;/a&gt;
          &lt;a href="#" id="dark"&gt;&lt;li&gt;dark theme&lt;/li&gt;&lt;/a&gt;
  
          &lt;/ul&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>Not sure where to go from here...</p>
  
  <p>Some assistance will be great. Thanks in advance. </p>