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...