color-scheme select and save

<!-- only use default color -->
<style>
  :root {
    color-scheme: normal;
  }

  @media (prefers-color-scheme: light) {
    :root {
      color-scheme: light;
    }
  }

  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
    }
  }
</style>
<script>
  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => {
    const newColorScheme = event.matches ? "dark" : "light";
    if (!localStorage.colorScheme || localStorage.colorScheme == "auto") {
      document.querySelector(":root").style.setProperty("color-scheme", newColorScheme);
    }
  });

  function initColorSchemeSelect(colorSchemeSelect) {
    if (!localStorage.colorScheme || localStorage.colorScheme == "auto") {
      colorSchemeSelect.value = "auto";
    } else if (localStorage.colorScheme == "dark" || localStorage.colorScheme == "light") {
      colorSchemeSelect.value = localStorage.colorScheme
    } else {
      colorSchemeSelect.value = "auto";
    }
    colorSchemeSelect.addEventListener("change", event => {
      switch (event.target.value) {
        case "auto":
          if (window.matchMedia) {
            if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
              document.querySelector(":root").style.setProperty("color-scheme", "dark");
            } else {
              document.querySelector(":root").style.setProperty("color-scheme", "light");
            }
          } else {
            document.querySelector(":root").style.setProperty("color-scheme", "normal");
          }
          localStorage.removeItem("colorScheme")
          break;
        default:
          document.querySelector(":root").style.setProperty("color-scheme", event.target.value);
          localStorage.colorScheme = event.target.value;
          return;
      }
    });
  }
</script>