PairDrop/public/scripts/theme.js

(function(){

  const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const prefersLightTheme = window.matchMedia('(prefers-color-scheme: light)').matches;

  const $themeAuto = document.getElementById('theme-auto');
  const $themeLight = document.getElementById('theme-light');
  const $themeDark = document.getElementById('theme-dark');

  let currentTheme = localStorage.getItem('theme');

  if (currentTheme === 'dark') {
    setModeToDark();
  } else if (currentTheme === 'light') {
    setModeToLight();
  }

  $themeAuto.addEventListener('click', _ => {
    if (currentTheme) {
      setModeToAuto();
    } else {
      setModeToDark();
    }
  });
  $themeLight.addEventListener('click', _ => {
    if (currentTheme !== 'light') {
      setModeToLight();
    } else {
      setModeToAuto();
    }
  });
  $themeDark.addEventListener('click', _ => {
    if (currentTheme !== 'dark') {
      setModeToDark();
    } else {
      setModeToLight();
    }
  });

  function setModeToDark() {
    document.body.classList.remove('light-theme');
    document.body.classList.add('dark-theme');
    localStorage.setItem('theme', 'dark');
    currentTheme = 'dark';

    $themeAuto.classList.remove("selected");
    $themeLight.classList.remove("selected");
    $themeDark.classList.add("selected");
  }

  function setModeToLight() {
    document.body.classList.remove('dark-theme');
    document.body.classList.add('light-theme');
    localStorage.setItem('theme', 'light');
    currentTheme = 'light';

    $themeAuto.classList.remove("selected");
    $themeLight.classList.add("selected");
    $themeDark.classList.remove("selected");
  }

  function setModeToAuto() {
    document.body.classList.remove('dark-theme');
    document.body.classList.remove('light-theme');
    if (prefersDarkTheme) {
      document.body.classList.add('dark-theme');
    } else if (prefersLightTheme) {
      document.body.classList.add('light-theme');
    }
    localStorage.removeItem('theme');
    currentTheme = undefined;

    $themeAuto.classList.add("selected");
    $themeLight.classList.remove("selected");
    $themeDark.classList.remove("selected");
  }

})();