document.addEventListener('DOMContentLoaded', function () {

  var themeSelector = document.querySelector('[placeholder="theme-select"]');
  themeSelector.addEventListener('change', function() {
    // get rid of old themes on body
    var options = Array.from(themeSelector.options)
    .forEach(function (option) {
      document.body.classList.remove(optionToTheme(option));
    });
    // add newly selected theme
    document.body.classList.add(optionToTheme(themeSelector.options[themeSelector.value - 1]));
  });

  function optionToTheme(option) {
    return optionValue = 'theme--' + option.innerText.toLowerCase().trim().replace(/\s/g, '-');
  }
});