<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>More color choices!</title>
  </head>
  <body>
    <label for="theme">Select theme: </label>
    <select id="theme">
      <option value="white">White</option>
      <option value="black">Black</option>
      <option value="purple">Purple</option>
      <option value="yellow">Yellow</option>
      <option value="psych">Psychedelic</option>
    </select>

    <h1>This is my website</h1>

    <script>
      const select = document.querySelector('select');
      const html = document.querySelector('html');

      select.onchange = function() {
        const choice = select.value;

        switch(choice) {
          case 'black':
            update('black','white');
            break;
          case 'white':
            update('white','black');
            break;
          case 'purple':
            update('purple','white');
            break;
          case 'yellow':
            update('yellow','darkgray');
            break;
          case 'psych':
            update('lime','purple');
            break;
        }
      }

      function update(bgColor, textColor) {
        html.style.backgroundColor = bgColor;
        html.style.color = textColor;
      }
    </script>
  </body>
</html>
