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





<!-- <p class="lightdark">
  Helloooooooo
</p> -->

html {
  color-scheme: light dark;
}

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

button {
  font-size: 200%;
  border-radius: 0.25em;
	border: 1px CanvasText solid;
}
button[aria-pressed="true"] {
  background-color: transparent;
  border-width: 2px;
}






/* p.lightdark {
  background-color: light-dark(pink, Teal);
  
  font-size: 200%;
  padding: 1em;
  border-radius: 1em;
}
@media (prefers-contrast:less) {
  html {
    color: CanvasText;
    background-color: Canvas;
    filter: contrast(0.6);
  }
} */

const html = document.querySelector("html");
const mode = localStorage.getItem("mode");
const lightSwitch = document.querySelector('#lightSwitch');
const darkSwitch = document.querySelector('#darkSwitch');
const autoSwitch = document.querySelector('#autoSwitch');

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

function switchAuto() {
  html.style.setProperty("color-scheme", "light dark");
  localStorage.removeItem("mode");
  lightSwitch.setAttribute("aria-pressed","false");
  darkSwitch.setAttribute("aria-pressed","false");
  autoSwitch.setAttribute("aria-pressed","true");
}

function switchLight() {
  html.style.setProperty("color-scheme", "light");
  localStorage.setItem("mode", "light");
  lightSwitch.setAttribute("aria-pressed","true");
  darkSwitch.setAttribute("aria-pressed","false");
  autoSwitch.setAttribute("aria-pressed","false");
}

function switchDark() {
  html.style.setProperty("color-scheme", "dark");
  localStorage.setItem("mode", "dark");
  lightSwitch.setAttribute("aria-pressed","false");
  darkSwitch.setAttribute("aria-pressed","true");
  autoSwitch.setAttribute("aria-pressed","false");
}

// there are likely DRYer ways to do this...