window.addEventListener('load', () => {
  // On page load, change the theme to light if they have that selected.
  // Dark is selected by default.
  const themeToggleButton = document.querySelector('button#theme-toggle');
  if (window.localStorage.getItem('theme') === 'light-theme') {
    document.body.setAttribute('id', 'light-theme');
    themeToggleButton.classList.add('light');
  }

  // When the theme button is clicked, switch the theme to the other one.
  themeToggleButton.addEventListener('click', event => {
    event.preventDefault();

    if (document.body.getAttribute('id') === 'dark-theme') {
      document.body.setAttribute('id', 'light-theme');
      themeToggleButton.classList.add('light');
    } else {
      document.body.setAttribute('id', 'dark-theme');
      themeToggleButton.classList.remove('light');
    }

    window.localStorage.setItem('theme', document.body.getAttribute('id'));
  });
});