<p>
  <button id="autoSwitch" type="button" onclick="switchAuto()">Auto</button>
  <button id="lightSwitch" type="button" onclick="switchLight()">Light</button>
  <button id="darkSwitch" type="button" onclick="switchDark()">Dark</button>
</p>

html {
  color-scheme: light dark;
}

p {
  width: max-content;
  margin: 3rem auto;
}

const html = document.querySelector("html");
const mode = localStorage.getItem("mode");

if (mode === "light") switchLight();
if (mode === "dark") switchDark();

function switchAuto() {
  html.style.setProperty("color-scheme", "light dark");
  localStorage.removeItem("mode");
}

function switchLight() {
  html.style.setProperty("color-scheme", "light");
  localStorage.setItem("mode", "light");
}

function switchDark() {
  html.style.setProperty("color-scheme", "dark");
  localStorage.setItem("mode", "dark");
}