<h1>This is a title</h1>

<p>I am just a boring text, existing here solely for the purpose of this demo</p>

<p>And I am just another one like the one above me, because two is better than having only one</p>

<a href="#">I am a link</a>

body {
  background: #fff;
  font: 100% system-ui;
}

h1,
p {
  color: #222;
}

body.dark-theme {
  background: #121212;
}
body.dark-theme h1,
body.dark-theme p {
  color: #eee;
}
body.dark-theme a {
  color: #809fff;
}

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

if (prefersDarkScheme.matches) {
  document.body.classList.add("dark-theme");
} else {
  document.body.classList.remove("dark-theme");
}