title: Switch CSS theming with JavaScript
body: <p>I have an HTML page with two buttons: a light theme button and a dark theme button. When I click the light theme button the background will turn light gray and text is black, when I click the dark theme button the background will turn black and text is white.</p>
  
  <p>When I reopen my page the last theme selected should be generated.</p>
  
  <p>so here is my html:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
      &lt;/head&gt;
  
      &lt;div class="MyPage"&gt;
          &lt;body&gt;
              &lt;h1&gt;choose a theme:&lt;/h1&gt;
              &lt;input id="b1" type="button" value="light theme"&gt;
              &lt;input id="b2" type="button" value="darck theme"&gt;
              &lt;p&gt;this a sample for using API local storage in HTML5 &lt;/p&gt;        
          &lt;/body&gt;
      &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.MyLightPage 
  {
      background-color: gray;
      text-decoration-color: black;
  }
  .MyDarkPage
  {
      background-color: black;
      color: white;  
  }
  </code></pre>
  
  <p>My problem is how to connect the 3 diverse types of my project (HTML, CSS and JavaScript) and what functions should be existing in my JavaScript file to make this happen.</p>