title: Change color scheme on refresh
body: <p>What I want to accomplish is to be able to change the CSS background-color/color of multiple elements on refresh. I also want them to appear in a grouping. Therefore, not random colors - all specified and in a "set". If possible, I'd like to do three colors (e.g. blue background, dark grey text, white link).</p>
  
  <p><em>For example:<br></em>
  Color Scheme 1 - Blue background, dark grey text, white link<br>
  Color Scheme 2 - Dark purple background, white link, pink link<br>
  Color Scheme 3 - White background, black text, green link</p>
  
  <p>Unfortunately, the only codes I can find online are for randomized colors.</p>
  
  <p>I appreciate all the help I can get.</p>
  
  <p><strong>EDIT:</strong> Following Paulie_D and Matus' comment, I tried to write up my own code with more research and multiple trial and error. Finally I came up with <a href="https://codepen.io/lexa-r/pen/vyZWpb" rel="nofollow noreferrer">this</a>.</p>
  
  <p><em>HTML:</em></p>
  
  <pre><code>&lt;link id="colorscheme" rel="stylesheet" type="text/css" href=""&gt;
  </code></pre>
  
  <p><em>JavaScript:</em></p>
  
  <pre><code>var stylesheets = ["schemeone.css", "schemetwo.css"];
  var rand = Math.floor(Math.random() * stylesheets.length);
  
  $(document).ready(function(){
  document.getElementById("colorscheme").setAttribute("href", stylesheets[rand]);
  });
  </code></pre>
  
  <p>However, Oliver's code compiles the color schemes in one CSS file, so thank you very much for the alternative and to everyone who gave me advice and direction.</p>