<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");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.