<h1>Heading 1</h1>

<button>
  Toggle Color
</button>

:root {
  color-scheme: light;
}

body {
  display: grid;
  font-size: 1.25rem;
  place-items: center;
}

button {
  font-size: 1.25rem;
  line-height: 1.35;
  width: 300px;
}

.dark {
  color-scheme: dark;
}

let root = document.querySelector(":root");
let button = document.querySelector("button");

button.addEventListener('click', () => {
  event.preventDefault();
  root.classList.toggle('dark');
})