function toggleTheme() {
  const theme = "theme-dark";//localStorage.getItem('theme');
  const root = document.querySelector(":root");
  root.classList.toggle(theme);
  if (root.classList.contains(theme)) {
    localStorage.setItem('theme', theme);
  } else {
    localStorage.setItem('theme', "theme-light");
  }
}

function setTheme(themeName) {
  console.log("setting theme: " + themeName);
  const root = document.querySelector(":root");
  root.classList.add(themeName);
  localStorage.setItem('theme', themeName);
}

function detectTheme() {
  const theme = localStorage.getItem('theme');
  if (theme === 'theme-dark' || theme === 'theme-light') {
    setTheme(theme);
    return;
  }

  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    setTheme('theme-dark');
    return;
  }

  if (window.matchMedia('(prefers-color-scheme: light)').matches) {
    setTheme('theme-light');
    return;
  }

  setTheme('theme-light');
}
detectTheme();